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

Question

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

我这样设置，但是当窗口狭窄时，由于scrool，窗口小部件会在窗口下面。

 $(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。这样，元素就不会跳跃，网站也会运行得更好。

如果您希望窗口小部件粘贴在窗口底部而不是顶部，则可以调整它。