Div移動を停止するページの下部に到達しました

Question

ここで私は新しいDivsを作成しようとしています。保存ボタンを押すと、テキスト領域からデータを取得し、を追加してボタンの上に新しい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}