停止Div移动当它到达页面的底部

Question

在这里，我尝试创建一些新的Div。当我按下保存按钮时，它从文本区域获取数据，并在按钮顶部创建一个新的div。这是完美的作品。然后我创建一些更多的div，按钮到达页面的底部。而且我的需求是，按钮应该在到达页面底部时停止。我不想滚动我的页面。我只需要创建div应滚动。不是整个页面。请给一些建议。谢谢。

$('.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

改变你的jQuery这样

$(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

给一个容器类，以这样的列表项;

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

使用一点样式，只要内容大小超过其大小，容器应滚动。

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