I am trying out the SMINT jquery plugin which seems perfect for what I want to do but I want the menu to start off in the fixed position at the top as opposed to become sticky as the first section scrolls. I've looked through the code however Jquery/js isnt exactly my strong point. The code looks like this:
// get initial top offset for the menu
var stickyTop = smint.offset().top;
// check position and make sticky if needed
var stickyMenu = function(direction){
// current distance top
var scrollTop = $(window).scrollTop()+myOffset;
// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
if (scrollTop > stickyTop+myOffset) {
smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addClass('fxd');
// add padding to the body to make up for the loss in heigt when the menu goes to a fixed position.
// When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page
$('body').css('padding-top', menuHeight );
} else {
smint.css( 'position', 'relative').removeClass('fxd');
//remove the padding we added.
$('body').css('padding-top', '0' );
}
// Check if the position is inside then change the menu
// Courtesy of Ryan Clarke (@clarkieryan)
if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){
if(direction == "up"){
$("#"+id).addClass("active");
$("#"+optionLocs[index+1][2]).removeClass("active");
} else if(index > 0) {
$("#"+id).addClass("active");
$("#"+optionLocs[index-1][2]).removeClass("active");
} else if(direction == undefined){
$("#"+id).addClass("active");
}
$.each(optionLocs, function(i){
if(id != optionLocs[i][2]){
$("#"+optionLocs[i][2]).removeClass("active");
}
});
}
};
// run functions
stickyMenu();
..so any help anyone could give me in this issue would be appreciated. Many thanks.
Aucun commentaire:
Enregistrer un commentaire