当 div 到达页面底部时停止移动答案

【问题标题】：Stop the Div Moving When it reaches the Bottom of the Page当 div 到达页面底部时停止移动
【发布时间】：2016-08-10 08:29:14
【问题描述】：

我在这里尝试创建一些新的 Div。当我按下保存按钮时，它会从文本区域获取数据并在 Add 按钮顶部创建一个新 div。这非常有效。然后我再创建一些 div，Add 按钮到达页面底部。而我的需要是，Add 按钮在到达页面底部时应该停止。我不想滚动我的页面。我只需要创建的 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>

【问题讨论】：

考虑在可滚动的 div 中创建新的 div。

标签： javascript html

【解决方案1】：

像这样为您的列表项提供一个容器类；

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

通过一点点样式，只要内容大小超过其大小，容器就会滚动。

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

【讨论】：

【解决方案2】：

像这样改变你的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>

【讨论】：