只有一個div的固定位置的按鈕

我創建了兩個div，一個在頂部，一個在底部。我創建了一個按鈕。我在左下角頁面給了一個固定位置的財產。如果我滾動頁面，按鈕僅固定在該位置。基本上按鈕處於整個頁面的固定位置。我的要求：當我滾動頁面時，按鈕應該只固定一定的高度。當我滾動頁面時，按鈕應該只固定在左邊按鈕，直到第一個div底線觸及按鈕底線。和文我滾動頁面的按鈕應該與第一個div的底線一起移動。只有一個div的固定位置的按鈕

基本上按鈕應該是固定的位置，直到第一個div底線。當第一個div底線與按鈕底線一起摺疊時，該按鈕應該是相對/絕對的並隨之一起移動。

希望你明白我的要求。下面是我的代碼，我找的要求


 

 
    #top { 
 
    border: 1px solid black; 
 
    height: 900px; 
 
    width: 80%; 
 
    position: absolute; 
 
} 
 

 
.button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    bottom: 0px; 
 
    font-size: 16px; 
 
    margin-left: 0px; 
 
    cursor: pointer; 
 
    padding: 10px 24px; 
 
    position: fixed; 
 
} 
 

 
#bottom { 
 
    border: 1px solid black; 
 
    height: 900px; 
 
    width: 80%; 
 
    top: 910px; 
 
    position: relative; 
 
} 
 

 
#middle { 
 
    bottom: 50px; 
 
    position: fixed; 
 
}

<html> 
 

 
    <body> 
 
    <div id="top"> 
 
     <div id="middle"> 
 
     <button class="button">Fixed Element</button> 
 
     </div> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 
    <div id="bottom"> 
 

 

 
    </div> 
 
    </body> 
 

 
</html>

來源

2016-07-26 Aryan

位置固定是相對於視，有這個quesiton一些有用的提示：HTTP： //stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-par你可能會覺得有用。 – connorb

我覺得這是不可能的，只有css。您需要javascript或jquery。你需要jquery來運行我的例子。你應該測量與top或其他元素的滾動量，並相應地改變按鈕的底部/頂部是這樣的：

jQuery的

$(window).scroll(function() { 
    if (($(this).scrollTop()+$(window).height())>$('#top').height()){ 
    $("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()- $('#top').height())+"px" }); 
    }else{ 
    $("#btn_fixed").css({ bottom: '0px' }); 
    } 
});

我已經改變css和代碼的html。

CSS

#top { 
    border: 1px solid black; 
    height: 900px; 
    width: 80%; 
    position: absolute; 
} 

.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    bottom: 0px; 
    font-size: 16px; 
    margin-left: 0px; 
    cursor: pointer; 
    padding: 10px 24px; 
    position: fixed; 
} 

#bottom { 
    border: 1px solid black; 
    height: 900px; 
    width: 80%; 
    top: 910px; 
    position: relative; 
}

HTML

<div id="top"> 
    <div id="middle"> 
    <button class="button" id="btn_fixed">Fixed Element</button> 
    </div> 
</div> 

<br> 
<br> 
<div id="bottom"> 


</div>

工作小提琴：https://jsfiddle.net/khairulhasanmd/h9y0bf1g/

來源

2016-07-26 11:57:01

謝謝你能解決這個使用「Javascript」？而不是Jquery 我會幫助我很多。 – Aryan

在'javascript'中的實現需要更多的代碼行，事件監聽器e.t.c.你可以通過搜索谷歌自己來轉換它。如果這有幫助，您可以將此答案標記爲已接受。謝謝。 –

只有一個div的固定位置的按鈕

回答

相關問題