Question

当用户粉碎页面时，我需要一个带有固定位置的侧边栏。我遇到了很多解决方案，而且非常笨重，复杂或太长。我需要它简单而有效。我试过这个：

var length = $( '#container' ).height() - $( '#stick' ).offset().top - parseFloat($( '#stick' ).css( 'marginTop' ).replace(/auto/, 0));

$(window).scroll(function () {

    var scroll = $(this).scrollTop();

    if (scroll < $( '#container' ).offset().top) {
      $( '#stick' ).removeAttr("style");
    }
    else if (scroll > length) {
      $( '#stick' ).css('position', 'absolute');
    }
    else {
      $( '#stick' ).css({"position":"fixed", "top":"0", "right":"0"});
    }
});

我是在Remy Sharp screencast和waypointarts blog post

的帮助下完成的

当#container到达视口的末尾时#stick停止滚动（“固定”位置被移除），问题是它消失并且不会保持在该位置的绝对位置，并且这种行为会分散注意力用户。

如何让#stick侧边栏绝对位于#container的底部而不是消失？你认为我的代码还能完善吗？

我很业余，现在开始使用jquery一个月，所以你会发现很多错误......

谢谢。

Answer 1

我设法做到了。我不知道为什么它会消失，但我决定不直接将css属性注入到html中，并使用更适合css的方法，在实际的css文件中应用css因为html应该有html语言。

所以有了这个想法，我用jquery动作添加了css类，在css中我添加了我想要的那些类的样式，一切都运行得很好。也许是一些重叠的css规则之前做了一些错误...无论如何现在它有更好的方法，它的格式更好。

所以，html：

<body>
  <header>The header</header>
  <main id="container">
    <article id="content">Main content</article>
    <section id="sticky">Sticking content</section>
  </main>
  <footer>The footer</footer>
<body>

jquery：

var $container = $( '#container' );
var $sticky    = $( '#sticky' );
var length     = $container.height() + $container.offset().top - $sticky.height();

$(window).scroll(function () {
    var y = $(this).scrollTop();
    if (y < $container.offset().top) { $sticky.removeClass('sticky-fixed sticky-bottom'); }
    else if (y > length) { $sticky.attr('class','sticky sticky-bottom'); }
    else { $sticky.attr('class','sticky sticky-fixed'); }
});

css：

#sticky {
    width: 260px;
    position: absolute;
    right: 0;
    top: 128px;
    }

#sticky-fixed {
    position: fixed;
    right: 0;
    top: 128px;
    }

#sticky-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    }

这是做什么的：

如果页面位于顶部，则#sticky将具有“绝对位置”，当用户开始滚动页面时，它将具有“位置固定”（始终在内容的一侧可见）并且当视点到达时#container的底部有主要内容，粘性将停在那里。

这种方法的主要优点是“部分粘性”不会与“页脚”或其他任何html元素重叠。 它将在#container 的末尾停止，并且由于具有“固定”位置，因此无论何时用户滚动页面，都不会分散用户的注意力。

这是我能做的最好的事情，看起来比我找到的其他完整脚本更容易和更轻松。如果有任何错误或可以进一步更新，请改进它并告诉我们。

由于jquery部分已经完成，它应该很容易适应其他人，只需根据自己的喜好更改css文件属性。

包含粘边栏

1 个答案: