Question

这个问题在小提琴中复制感觉有点复杂，所以我遇到问题here。

在主页上，如果您滚动然后点击徽标，它会向上滚动你很好，但是如果你点击一个项目并尝试做同样的事情它就不会工作。我相信它无法检测到滚动，因为一旦项目处于活动状态，包含的div就会被固定，因此它会在技术上滚动下面的内容，即主页。

的Javascript

$("a[href='#top']").click(function() {
        $("html, body").animate({ scrollTop: 0 }, 700);
        return false;
});

CSS

#project {
    position:fixed;
    left:0;
    width:100%;
    height:100%;

    opacity:0;
    top:100%;
    background: #efefed;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
body.projectLoaded {
    overflow: hidden;
}
body.projectLoaded #project {
    opacity:1;
    top:0;
}
#project-container {
    overflow: auto;
    position: relative;
    height: 100%;
    padding-top: 60px;
}

有没有办法让这个javascript功能按我想要的方式进行？我知道它的构建方式可能很困难。在#fixme div中，我试图这样做How to make div fixed after you scroll to that div?，我也相信出于同样的原因，为什么这也不起作用。

更新：所以解决方案是在监听器中添加#project-container。我怎么能在这里做到？

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }
});

会变成(window, "#project-container")吗？

Answer 1

$("a[href='#top']").click(function() {
        $("html, body, #project-container").animate({ scrollTop: 0 }, 700);
        return false;
});

如果我在固定的div中，则无法检测到滚动到顶部

1 个答案: