Html按鈕位置被固定到一定的div限制

-1

我在div中有一個按鈕。我希望它被固定在屏幕的底部，直到我向下滾動頁面到div端。進一步滾動將導致按鈕位於div的底部。Html按鈕位置被固定到一定的div限制

注意：在擴展其內容時，div的大小可能會發生變化。

我的代碼是：

<html> 
<section> 
<div> 
<div> some content</div> 
<div class="apply-filter" id="showsubmit" align="right"> 
            <input class="com-btn" onclick="javascript:journalApplyFilters()" value="Apply Filters" /> 
           </div> 
           </div> 
           </section> 
           </html> 

<style> 
.com-btn, nav#facets form.filter-list-form .submit 
{ 
    padding: 5px 10px; 
    color: #2f2f2f; 
    font-weight: bold; 
    text-shadow: 0 1px 0 #D6DEE6; 
    cursor: pointer; 

    border: 1px solid #94a4b2; 
    border-radius: 3px; 
    background: #aebfce; 
    position: fixed; 
    bottom: 4px; 

</style> 
<script type="text/javascript"> 
function checkOffset() { 
       if($('.com-btn').offset().top + $('.com-btn').height() >= $('footer').offset().top - 10) 
       $('.com-btn').css('position', 'absolute'); 
       if($(document).scrollTop() + window.innerHeight < $('footer').offset().top) 
        $('.com-btn').css('position', 'fixed'); // restore when //you scroll up 
      } 
      $(document).scroll(function() { 
       checkOffset(); 
      }); 

</script>

問題是，正如我所說，我的DIV是可變的大小，以便某些時候頁腳是不可見的，則「應用過濾器」按鈕仍然在頁面底部（固定屬性）。無2-時如果我點擊+按鈕展開內容我的頁腳是可見的，則該按鈕是不可見的，直到我再滾動

來源

2015-11-06 Pranaya kumar Sahu

好了，我可以問你已嘗試到現在呢？代碼呢？沒有人會幫助你，如果你會問這樣的問題。首先閱讀如何問問題，然後問plz .. –

歡迎來到堆棧溢出！請回顧[**如何問**]（http://stackoverflow.com/help/how-to-ask）關於Stack Overflow的問題以及哪些類型的問題[**可以被問到**]（http：/ /stackoverflow.com/help/on-topic）和什麼類型[**應該避免。**]（http://stackoverflow.com/help/dont-ask） –

歡迎來到Stack Overflow，請考慮編輯你的問題包括你上面提出的評論，儘管如此，但我希望我的回答能夠幫助你走向正確的方向。 – GibboK

你應該以有這樣的行爲作爲一個CSS使用JS只有解決方案可能不可行。

下面是一個簡單的例子，只是爲了幫助你開始。

基本上你可以：

添加或刪除類與position:fixed;當用戶滾動的x像素

window.scrollY的窗口可以使用找出用戶擁有多少滾動在窗前。

position:fixed;在您的CSS允許您將您的按鈕相對於視口，這意味着即使頁面滾動它始終停留在同一個地方。

現場示例，請注意向下滾動100個像素後的按鈕位置。

window.addEventListener('scroll', function(event){ 
    console.log(window.scrollY); 
    if(window.scrollY >= 100){ 
     var elm = document.getElementById('btn').classList.remove('fix'); 
    } 
}) 

<div id="area"> 
    <button id="btn" class="fix" type="button">Click Me!</button> 
</div> 
<div id="content"> 
    <p>some text here</p> 
</div> 

body{ 
    margin :0; 
    padding:0; 

} 
#area { 
    position:absolute; 
    top:0; 
    left:0; 
    width:250px; 
    height:250px; 
    background-color:red; 
} 
#content { 
    position:absolute; 
    top:1500px; 
    background-color:gray; 
} 
#btn{ 
    position:absolute; 
    bottom:0; 
} 
.fix { 
    position: fixed !important; 
    bottom:0; 

}

來源

2015-11-06 11:24:57 GibboK

Html按鈕位置被固定到一定的div限制

回答

相關問題