Darren Bachan Darren Bachan - 6 months ago 15
Javascript Question

Can't detect scroll to top if I'm in a fixed div

This issue felt a bit complex to replicate in a fiddle, so I have the issue here.

On the homepage if you scroll and then click on the logo it'll scroll you up just fine, but if you click onto a project and try to do the same thing it won't work. I believe it can't detect the scroll because once a project is active the containing div is fixed so it'll technically scroll what's beneath, which is the homepage.

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;
}


Is there a way to still make this javascript function the way I want it to? I know the way it's built it may be difficult. In the
#fixme
div I was trying to do this How to make div fixed after you scroll to that div? and I believe for the same reason, why this won't work either.

UPDATE:
So the solution was to add #project-container in the listener. How would I do it here?

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'
});
}
});


Would it become
(window, "#project-container")
?

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