Jquery 包含粘性边栏_Jquery_Fixed_Sidebar_Sticky

Jquery 包含粘性边栏

jquery

Jquery 包含粘性边栏,jquery,fixed,sidebar,sticky,Jquery,Fixed,Sidebar,Sticky,我需要一个边栏，当用户浏览页面时，它保持在一个固定的位置。我遇到了很多解决方案，都非常笨拙、复杂或太长。我需要它简单有效。我试着做了这个： var length = $( '#container' ).height() - $( '#stick' ).offset().top - parseFloat($( '#stick' ).css( 'marginTop' ).replace(/auto/, 0)); $(window).scroll(function () { var scr

我需要一个边栏，当用户浏览页面时，它保持在一个固定的位置。我遇到了很多解决方案，都非常笨拙、复杂或太长。我需要它简单有效。我试着做了这个：

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"});
    }
});

我是在和的帮助下做的

当容器到达视口末端时，棒停止滚动，固定位置被移除，问题是它会消失，并且不会停留在该位置的绝对位置，这种行为会分散用户的注意力

我如何才能使棒边栏绝对定位在容器底部，而不是消失？你认为我的代码可以通过某种方式完善吗

我是个业余爱好者，现在开始使用jquery一个月了，所以你会在这里发现很多错误

谢谢。

我设法做到了。我不知道为什么它会消失，但是我决定不直接将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>

它的作用是：

如果页面位于顶部，则粘滞将具有绝对位置，当用户开始滚动页面时，其位置将固定，始终可见于内容的侧面，当视点到达容器底部（容器中包含主要内容）时，粘滞将停止在该位置

这种方法的主要优点是，sticky部分不会与页脚或它下面的任何其他html元素重叠。它将停止在容器的末端，因为它有一个固定的位置，所以当用户滚动页面时，不会分散用户跟随视点的注意力

这是我能做的最好的了，看起来比我找到的其他完整脚本更简单、更轻松。如果它有任何错误或如果它可以进一步更新，请改进它，让我们知道

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

当足够多的浏览器支持它时，就可以使用非常棒的wow。我不知道这个职位有空。谢谢你指点。现在不是一个可靠的选择：

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'); }
});

#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;
    }