當Div到達頁面底部時停止移動

Question

在這里，我正在嘗試創建一些新的Divs。 當我按下保存按鈕時，它將從文本區域中獲取數據，並在“ 添加按鈕”的頂部創建一個新的div。 完美的作品。 然后，我再創建一些div，“ 添加按鈕”到達頁面底部。 我需要的是， 添加按鈕到達頁面底部時應停止。 我不想滾動頁面。 我只需要Create 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 { height: 4000px; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width:50%; } #nav_bar { border: 0; background-color: #202020; border-radius: 0px; 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}