jquery - 始终可见的小部件位于窗口的任何高度

Question

我有以下情况，正如您在图片中看到的那样，小部件 block 必须始终处于可见区域，但在滚动期间从顶部边缘滚动到底部边缘。

我是这样设置的，但是当窗口很窄时，由于滚动，小部件会在窗口下面。

 $(window).scroll(function () {
  var $scrollingDiv = $(".widget");


          $scrollingDiv.css({
              "top": ($(window).scrollTop())
          });

});

如何在滚动过程中将其保持在边缘之间？

the jsfiddle example

live site example

Answer 1

这样的事情怎么样:

var $scrollingDiv = $(".widget"),
    main = $('.main'),
    mainOff = main.offset().top,
    mainBottom = mainOff + main.height() - $scrollingDiv.height();
$(window).scroll(function () {
   var winScroll = $(window).scrollTop();
    if(mainOff <= winScroll && winScroll <= mainBottom){
        $scrollingDiv.addClass('fixed').removeClass('bottom');
    }else if(winScroll > mainBottom){
        $scrollingDiv.addClass('bottom').removeClass('fixed');
    }
    else{
        $scrollingDiv.removeClass('fixed bottom')
    }

});

CSS:

.widget.fixed { position: fixed; left: auto; right: 50%; margin-right: -232px; }
.widget.bottom { top: auto; bottom: 0; }

Demo

几乎我只添加和删除类，并固定元素而不是每次滚动时都添加新的 css。这样元素就不会跳转，站点也会运行得更好。

如果您希望小部件停留在窗口底部而不是顶部，您可以对其进行调整。