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限制

回答

相关问题