Question

所以在我的页面上，我有一个div，我称之为＆＃34;分页菜单＆＃34;我称之为容器div的div＆＃34; news＆＃34;。我希望分页菜单div仅在我滚动浏览新闻div时显示，如果我滚动浏览任何其他容器div，则会消失。

这是我到目前为止的代码：

＆＃13;

$(window).scroll(function(){
        var elementoffset = $('#news').offset(); // <<< change #elementhere with your element you want the scroll to make action when reach it                         
        if ($(this).scrollTop() > elementoffset.top - 75) {
            $('.pagination-menu').fadeIn(150);
            $('.pagination-menu').addClass('displaybox');

        }
        else {
            $('.pagination-menu').fadeOut(150);
            $('.pagination-menu').removeClass('displaybox');
        }
        
     }); // EOF scroll

＆＃13;

如何仅通过滚动新闻div来保持分页界限？目前，它的设置使得分页菜单div不显示，直到我通过滚动到达新闻div，但它仍然在通过新闻div的底部边界后仍然存在。

谢谢，我感谢你给予的任何帮助。

Answer 1

var newsEle = $('#news'),
    pageEle = $('.pagination-menu'),
    newsEleOffset,newsEleBottom;

    function fnFadeIn(){
        pageEle.fadeIn(150);
        pageEle.addClass('displaybox');
    }
    function fnFadeOut(){
        pageEle.fadeOut(150);
        pageEle.removeClass('displaybox');
    }
   $(window).scroll(function () {
        newsEleOffset = newsEle.offset();
        newsEleBottom = newsEleOffset.top + newsEle.height();
        if ($(this).scrollTop() > newsEleOffset.top - 75) {
            if ($(this).scrollTop() > newsEleBottom) {
                fnFadeOut();
            } else {
                fnFadeIn();
            }
        }
        else {
            fnFadeOut();
        }
    });

在容器中显示和隐藏DIV

1 个答案: