Question

我有一个标题出现在滚动上并且是固定的，但在产品页面上我还希望导航在滚动到某一点时被修复。我遇到的问题是，它们都是同一个事件。因此，我在同一事件中包含带有标题代码的导航代码，但这意味着当我在产品页面以外的页面上时，该操作不再有效，因为它无法在产品页面上找到元素。如果我单独执行它们，它会与同一事件发生冲突。

我可以使用服务器端代码在页面脚本上执行此操作，但我想知道是否有办法解决它，如果它仍然在JS文件中。

height2 = $('#product_nav_cont').offset().top;
header2 = $('#scroll_header_cont').outerHeight();
empty_div = "<div class='empty_div' style='width:100%; height:"+header2+"px; display:block;' ></div>";
$(window).scroll(function() {
    height = $('#main_header_nav_cont').outerHeight();
    scroll = $(this).scrollTop();
    if(scroll > height) {
        $('#scroll_header_cont').fadeIn(400);
    } else {
        $('#scroll_header_cont').stop().hide();
    }

    scroll2 = $(this).scrollTop();
    pos2 = height2-header2
    //$('#scroll_logo').text(height)
    if(scroll2 > pos2) {
        $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'});
        if( !$('.empty_div').length) {
            $('#main_header_nav_cont').after(empty_div);
        }
    } else {
        $('#product_nav_cont').css({'position':'static','top':'0'});
        $(".empty_div").remove();
    }

});

Answer 1

为什么不检查页面上是否存在该元素：

$(window).scroll(function() {

    if (document.getElementById('main_header_nav_cont')) //check if this element is on the page. If not it returns null and it won't execute this if clause.
    {
        height = $('#main_header_nav_cont').outerHeight();
        scroll = $(this).scrollTop();
        if(scroll > height) {
            $('#scroll_header_cont').fadeIn(400);
        } else {
            $('#scroll_header_cont').stop().hide();
        }
    }
    scroll2 = $(this).scrollTop();

    //$('#scroll_logo').text(height)
    if (document.getElementById('product_nav_cont')) //same thing here
    {
        pos2 = height2-header2;
        height2 = $('#product_nav_cont').offset().top;
        if(scroll2 > pos2) {
            $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'});
            if( !$('.empty_div').length) {
                $('#main_header_nav_cont').after(empty_div);
            }
        } else {
            $('#product_nav_cont').css({'position':'static','top':'0'});
            $(".empty_div").remove();
        }
    }
});

与jquery中的scroll事件冲突

1 个答案: