【问题标题】:JQuery fixed sidebar not working on long contentJQuery 固定侧边栏不适用于长内容
【发布时间】:2012-05-01 16:51:30
【问题描述】:

我有一个 wordpress 网站,在帖子页面中我有一个 jquery 固定侧边栏。固定侧边栏从帖子部分开始,在评论部分停止。

我正在使用这个 jquery

$window = $(window),
    $sidebar = $("#side-scroller"),
    sidebarTop = $sidebar.position().top,
    sidebarHeight = $sidebar.height(),
    $footer = $("#comments"),
    footerTop = $footer.position().top,    
    $sidebar.addClass('fixed');

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


    $window.scroll(function(event) {
        scrollTop = $window.scrollTop(),
        topPosition = Math.max(0, sidebarTop - scrollTop),
        topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
        $sidebar.css('top', topPosition);

        if(isScrolledIntoView('#comments')){
            $("#side-scroller").hide();
        }
        else{
            $("#side-scroller").show();
        }
    });

这很好用,但是当帖子内容太长时,它永远不会停留在评论部分。

在这里你可以看到演示,

普通帖子(固定侧边栏正常工作的地方) http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5

还有很长的帖子(侧边栏不断滚动的地方) http://webstutorial.com/google-server-side-geocoding-php-infobox/website-tweaks/google

这不是垃圾邮件,也不是链接建设,所以请不要投反对票

【问题讨论】:

  • 我能知道投反对票的原因吗?

标签: jquery fixed sidebar


【解决方案1】:

我认为它正在工作,但是由于加载后页面的变化,它计算的高度不正确。

所以如果你把它移到 $window.scroll 函数中,它应该在滚动时得到正确的值。

$footer = $("#comments"),
footerTop = $footer.position().top;

【讨论】:

  • 好的,我试试看
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-29
  • 1970-01-01
  • 2014-11-14
相关资源
最近更新 更多