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 {
	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}

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

2 个答案: