Question

这是我已经拥有的代码：

$(document).ready(function()
{
    /*Scrolls to whichever element is clicked if is has .scrollPage class */
    $('.scrollPage').click(function() {
        var elementClicked = $(this).attr("href");
        var destination = $(elementClicked).offset().top;
        $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-0}, 500 );
        return false;
    });

    $('#backToTop').hide();
    $('#sideNav').hide();

    var headerHeight = $('#header').height();   

    /* Detect when page is scrolled */
    $(document).scroll(function(){ 
        var scrolledpx = parseInt($(document).scrollTop()); 
        if (scrolledpx > headerHeight) {
            $("#backToTop").fadeIn(500);
            $("#sideNav").fadeIn(500);
        }
        else if (scrolledpx < headerHeight) {
            $("#backToTop").fadeOut(500);
            $("#sideNav").fadeOut(500);         
        }
    });


});

#backToTop的相应HTML是：

<div id="backToTop">
Top
</div>

CSS：

.backToTop {
position: fixed;
top: 10px;
left: 10px;
}

问题是当我在标题下面滚动时#backToTop没有显示，但是当我点击链接滚动到特定部分（工作正常）时，似乎为#backToTop留下了空间（即它只是将页面向下移动一行），但没有显示。我做错了什么？

Answer 1

抱歉，非常简单。我在CSS中使用.backToTop而不是#backToTop。

Answer 2

看到这个小提琴：http://jsfiddle.net/Fcden/

你的css应该是：

#backToTop {
position: fixed;
top: 10px;
left: 10px;
}

因为backToTop是分配给div的id（不是class），

滚动过头时无法显示导航div

2 个答案: