Question

我希望在使用类fixed滚动div之后，停止使用类fixed修复底部的div。

我找到了解决办法。借助以下评论。

我有以下JS：

var element = $(".below");
window.onscroll = function(ev) {
   var a = element.position(); 
    if (a.top <= window.scrollY + window.innerHeight) {
        $("fixed").css('position', 'static');
    } else{
       $("fixed").css('position', 'fixed');
   }
};

我有以下HTML：

<header>
</header>
<section>
  Some html and text here here
</section>
<section class="fixed" style="position: fixed; width: 100%; bottom: 0;">
  text
</section>
<section class="below">
</section>
<footer>
</footer>

但可以制作出来吗？

Answer 1

你可以使用https://stackoverflow.com/a/9439807/2894798来实现滚动检测，如示例...

＆＃13;

var element = document.querySelector(".fixed");
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        element.style.position = 'absolute';
    }
};

＆＃13;

<header>
</header>
<section style="position:relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus arcu eget metus consequat fermentum. Morbi mattis, ante ut luctus interdum, dui purus ultrices enim, ut egestas ipsum felis eget nisl. Cras id mauris eget turpis hendrerit tristique. Suspendisse quis orci neque. Morbi auctor neque vitae elit facilisis, ut aliquam augue viverra. Proin porta magna vitae turpis ornare dignissim. Suspendisse at eros faucibus, eleifend nibh a, mollis risus. Nam sit amet ex leo. Duis turpis arcu, commodo non gravida id, ornare eget orci. Integer eu ligula dolor. Maecenas pulvinar mollis ex, in efficitur diam tristique quis.

In hac habitasse platea dictumst. Ut sed mauris in ex interdum faucibus id quis nisi. Mauris nec tellus in mauris dignissim rutrum. Nam vitae mattis neque. Phasellus eget mi sagittis, porta dui sit amet, porta nunc. Quisque porta suscipit nulla ac vulputate. Vestibulum at purus sed magna rutrum porttitor sit amet dignissim turpis. Mauris sed hendrerit purus. Quisque consequat interdum ligula, sed pretium ex rhoncus vitae. Morbi blandit turpis sed arcu ornare vehicula. Duis ac velit fermentum, tincidunt est at, sagittis nunc. Pellentesque quis elementum purus.

Quisque venenatis convallis lacus, ac fermentum lectus. Fusce mollis nibh sit amet ante ornare, eu mattis augue porttitor. Nulla nibh justo, suscipit eu dui ac, porttitor molestie lacus. Curabitur sed auctor massa. In rutrum eu neque non vestibulum. Mauris pellentesque, dolor id gravida gravida, magna nibh malesuada dolor, et auctor orci est eu velit. Phasellus volutpat, turpis non faucibus cursus, elit augue tincidunt lacus, quis dictum elit mauris eu lorem. Vivamus volutpat convallis volutpat. Sed luctus ipsum ante, eu varius augue dictum ac. Proin sit amet elit accumsan, tincidunt tellus non, lobortis tellus. Sed id nulla sed lectus mattis vestibulum nec et risus. Vivamus malesuada consectetur libero vitae tincidunt. Aenean at convallis odio. Nullam sagittis lectus neque, luctus ultrices ipsum varius sed. Phasellus ac blandit turpis. Pellentesque sapien sem, ullamcorper sed porttitor eu, euismod non ex.

Sed eu metus id est efficitur varius. Donec sagittis venenatis justo, vitae egestas arcu lacinia quis. Sed volutpat mollis porta. Integer id molestie felis, id venenatis felis. Praesent ullamcorper lorem in dapibus dapibus. Nunc non urna nec nisi sollicitudin posuere. Cras non ex metus.

Nam porta purus purus, vitae rutrum ligula maximus vitae. Proin sapien eros, eleifend non magna accumsan, rhoncus lobortis risus. Etiam rutrum nibh eu neque aliquet, eget faucibus quam auctor. Nullam posuere convallis leo, eu rhoncus ligula. Fusce fermentum justo nunc, et porttitor felis eleifend sit amet. Quisque tristique erat eu imperdiet efficitur. Vestibulum rhoncus dolor felis, elementum venenatis lectus pretium ut.
<section class="fixed" style="position: fixed; width: 100%; bottom: 0;background:red;">
text
</section>
</section>

<footer>
</footer>

＆＃13;

将div更改为static

1 个答案: