logo标签列表

停止固定位置在页脚

javascriptjquerycssscrollfixed
55

我正在寻找一个解决方案，用于解决将一个固定对象停留在页面底部的常见问题。

我有一个固定的“分享”框，位于屏幕左下角，我不希望它滚动到页脚上方，因此我需要它停留在页脚大约10px 的位置。

我查看了其他类似的问题，并尝试了一些方法。目前我找到的最接近/最简单的样例是http://jsfiddle.net/bryanjamesross/VtPcm/ 但是我无法使其适用于我的情况。

这是分享框的HTML：

    <div id="social-float">
        <div class="sf-twitter">
            ...
        </div>

        <div class="sf-facebook">
            ...
        </div>

        <div class="sf-plusone">
            ...
        </div>
    </div>

...还有CSS：

#social-float{
position: fixed;
bottom: 10px;
left: 10px;
width: 55px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid #ccd0d5;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
}
元素的选择器是#footer，它没有固定高度，如果这会有所影响，请帮我创建一个简单的jQuery解决方案，非常感谢！
Fiddle与您所需的有何不同？ - Derk Arts
代码相关内容翻译：Fiddle 中的侧边栏与浏览器窗口没有固定位置。我不知道，这可能是完全相同的概念，但我尝试了一下，发现无法在我的情况下使其正常工作。我需要该框位于窗口左下角，直到它到达页脚，然后随页面滚动。 - scferg5
14个回答
0
我采用了@user1097431的答案修改版：
function menuPosition(){
// distance from top of footer to top of document
var footertotop = ($('.footer').position().top);
// distance user has scrolled from top, adjusted to take in height of bar (42 pixels inc. padding)
var scrolltop = $(document).scrollTop() + window.innerHeight;
// difference between the two
var difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin
if (scrolltop > footertotop) {
    $('#categories-wrapper').css({
       'bottom' : difference
   });
}else{
    $('#categories-wrapper').css({
       'bottom' : 0
   });
 };
};
0

现在您可以使用

#myObject{
  position:sticky;
}

希望这可以帮到你。
不支持IE 11。 - Josh
0

我正在努力停止页脚前某一点的广告横幅。并尝试使用上面找到的代码。

对我有用（横幅在页脚之前消失，并在向上滚动时重新出现）：

<style>
#leftsidebanner {width:300px;height:600px;position: fixed; padding: 0;top:288px;right:5%;display: block;background-color: aqua}
</style>

<div id="leftsidebanner">
</div>


<script>

    $.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'absolute','bottom': pos});
      } else {
        stickyAd.css({'position': 'fixed','top': '100'});
      }
    });
  };
  $('#leftsidebanner').followTo(2268);


</script>
-1

一种纯CSS的解决方案

<div id="outer-container">
    <div id="scrollable">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in vulputate turpis. Curabitur a consectetur libero. Nulla ac velit nibh, ac lacinia nulla. In sed urna sit amet mauris vulputate viverra et et eros. Pellentesque laoreet est et neque euismod a bibendum velit laoreet. Nam gravida lectus nec purus porttitor porta. Vivamus tempor tempus auctor. Nam quis porttitor ligula. Vestibulum rutrum fermentum ligula eget luctus. Sed convallis iaculis lorem non adipiscing. Sed in egestas lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dictum, lacus quis venenatis ultricies, turpis lorem bibendum dui, quis bibendum lacus ante commodo urna. Fusce ut sem mi, nec molestie tortor. Mauris eu leo diam. Nullam adipiscing, tortor eleifend pellentesque gravida, erat tellus vulputate orci, quis accumsan orci ipsum sed justo. Proin massa massa, pellentesque non tristique non, tristique vel dui. Vestibulum at metus at neque malesuada porta et vitae lectus.
    </div>
    <button id="social-float">The button</button>
</div>
<div>
Footer
</div>
</div>

这里是 CSS

#outer-container {
    position: relative;
}

#scrollable {
    height: 100px;
    overflow-y: auto;
}

#social-float {
    position: absolute;
    bottom: 0px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接