I have a responsive single page website that contains a featured slider area plus 4 sections of content. I have created a floating menu that allows users to navigate to each section. On page load I want to the menu to sit positioned absolutely in the middle of the featured slider area on the left. (The menu is only visible for desktop)
On scroll down once the menu is 134px from the top of the page I change the menu to become fixed so that it sits in the same place as the user views each content section (at the top of the content).
I have created a jsfiddle with the example. http://jsfiddle.net/VZL3K/5/
Currently it breaks when I do the following:
1.Click a section in the menu so that is scrolls down, resize the browser then scroll up. The menu doesn't stop at the middle point of the feature area.
Currently I am struggling with the logic of how this needs to be assembled.
1.Find the middle point of the featured area and set the menu position to sit there if user is at the top of the page. 2.On scroll down, check when the menu is 134px from the top and set as fixed. 3.On scroll up, if it is inside the featured content area stop when it reaches the middle point, otherwise stay at 134px.
// Menu Position
$(function() {
function fixedMenu() {
var featureMiddleSpot = (($(".feature-slides").height()/2) - ($("#main-menu").height()/2) + ($("header").height()));
if ($(document).scrollTop() < 134 ) {
$("#main-menu").css({
"position" : "absolute",
"top" : featureMiddleSpot
});
}
$(window).scroll(function() {
if ($(document).scrollTop() >= featureMiddleSpot - 134) {
$("#main-menu").css({
"position" : "fixed",
"top" : "134px"
});
} else {
$("#main-menu").css({
"position" : "absolute",
"top" : featureMiddleSpot
});
}
});
}
fixedMenu();
$(window).resize(function(){
fixedMenu();
});
});
I hope this makes sense!
Thanks so much!
Ok you only need to change a variable from distance1 to featureMiddleSpot
if ($(document).scrollTop() >= featureMiddleSpot - 134) {
$('#main-menu').css({
'position' : 'fixed',
'top' : '134px'
});
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments