Div 이동 중지 페이지 하단에 도달했을 때

Question

여기에 새로운 Div를 만들려고합니다. 저장 버튼을 누르면 텍스트 영역에서 데이터를 가져오고 추가 버튼 위에 새로운 div를 만듭니다. 그게 완벽하게 작동합니다. 그런 다음 을 추가하여 버튼을 페이지 아래쪽에 둡니다. 그리고 내 필요는, 추가 버튼이 페이지의 하단에 도달하면 멈춰야합니다. 내 페이지를 스크롤하고 싶지 않습니다. 난 그냥 만든 divs 스크롤해야합니다. 전체 페이지가 아닙니다. 조언을 해주세요. 고맙습니다.

$('.add-list-button').on('click', function() { 
 
    $('.add-list-button').hide(); 
 
    $('.list-create').show(); 
 
    document.getElementById("SAVE_LIST").focus(); 
 

 
}); 
 

 

 

 

 
$('.save-list').on('click', function() { 
 
    var listName = $('.list').text(); 
 

 
    if (listName !== "") { ////////////////// 
 
    $('.list').html(""); 
 
    $('.add-list-button').hide(); 
 
    $('.list-create').show(); 
 
    document.getElementById("SAVE_LIST").focus(); 
 

 
    createNewList(listName); 
 
    } 
 

 
}); 
 

 
$('.close-list').on('click', function() { 
 
    $('.list-create').hide(); 
 
    $('.add-list-button').show(); 
 
    $('.list').html(""); //////////////////////////////// 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 

 
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; "> 
 

 
    <div class="add-list-button"> 
 
    <b> Add </b> 
 
    </div> 
 

 
    <div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; "> 
 

 
    <div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div> 
 

 
    <div style="width: 250px; height: 35px; margin-top: 5px;"> 
 
     <input class="save-list" type="button" value="Save" style="cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;"> 
 

 
     <img class="close-list" src="public/media/images/icons/cls.png" width="27" height="27" style="cursor: pointer; margin-top: 3px; margin-left: 5px;"> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 1

변경이

$(document).ready(function() { 
 
    
 
    $(window).scroll(function() { 
 
     //if you hard code, then use console 
 
     //.log to determine when you want the 
 
     //nav bar to stick. 
 
     console.log($(window).scrollTop()) 
 
    if ($(window).scrollTop() > 80) { 
 
     $('#nav_bar').addClass('navbar-fixed'); 
 
    } 
 
    if ($(window).scrollTop() < 81) { 
 
     $('#nav_bar').removeClass('navbar-fixed'); 
 
    } 
 
    }); 
 
});

html, body { 
 
\t height: 4000px; 
 
} 
 

 
.navbar-fixed { 
 
    top: 0; 
 
    z-index: 100; 
 
    position: fixed; 
 
    width:50%; 
 
} 
 

 

 

 
#nav_bar { 
 
\t border: 0; 
 
\t background-color: #202020; 
 
\t border-radius: 0px; 
 
\t margin-bottom: 0; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; "> 
 

 
    <div id="nav_bar" class="add-list-button"> 
 
    <b style="color:white;"> Add </b> 
 
    </div> 
 

 
    <div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; "> 
 

 
    <div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>

Answer 2

처럼 JQuery와이 같은 목록 항목에 컨테이너 클래스를 부여;

<div class="listcontainer"> 
//items 
</div> 

조금 스타일을 지정하면 콘텐츠 크기가 크기를 초과 할 때마다 컨테이너가 스크롤해야합니다.

.listcontainer{height:200px;display:block}