i'm making 1 page website , want use smint(jquery plugin) scroll right section in webpage. made navbar , when click section1 @ navbar site scroll top not top. navbar position fixed because want staying top when page scrolling page. problem because section1 under navbar. , when click section2 jump section2 section2 in navbar not active? ideas how can fix problem.
//jquery.smint.js /* smint v1.0 robert mccracken smint v2.0 robert mccracken awesome ryan clarke (@clarkieryan) , mcpacosy (@mcpacosy) smint v3.0 robert mccracken awesome ryan clarke (@clarkieryan) , mcpacosy (@mcpacosy) smint first dabble jquery plugins! http://www.outyear.co.uk/smint/ if smint, or have suggestions on how improved, send me tweet @rabmyself */ (function(){ $.fn.smint = function( options ) { var settings = $.extend({ 'scrollspeed' : 500, 'myselector' : 'div' }, options); // adding class users div $(this).addclass('smint'); //set variables needed var optionlocs = new array(), lastscrolltop = 0, menuheight = $(".smint").height(), smint = $('.smint'), sminta = $('.smint a'), myoffset = smint.height(); if ( settings.scrollspeed ) { var scrollspeed = settings.scrollspeed } if ( settings.myselector ) { var myselector = settings.myselector }; return sminta.each( function(index) { var id = $(this).attr('href').split('#')[1]; if (!$(this).hasclass("extlink")) { $(this).attr('id', id); } //fill menu optionlocs.push(array( $(myselector+"."+id).position().top-menuheight, $(myselector+"."+id).height()+$(myselector+"."+id).position().top, id) ); /////////////////////////////////// // initial top offset menu var stickytop = smint.offset().top; // check position , make sticky if needed var stickymenu = function(direction){ // current distance top var scrolltop = $(window).scrolltop()+myoffset; // if scroll more navigation, change position fixed , add class 'fxd', otherwise change absolute , remove class if (scrolltop > stickytop+myoffset) { smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addclass('fxd'); // add padding body make loss in heigt when menu goes fixed position. // when item fixed, removed flow height doesnt impact other items on page $('body').css('padding-top', menuheight ); } else { smint.css( 'position', 'relative').removeclass('fxd'); //remove padding added. $('body').css('padding-top', '0' ); } // check if position inside change 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(); // run function every time scroll $(window).scroll(function() { //get direction of scroll var st = $(this).scrolltop()+myoffset; if (st > lastscrolltop) { direction = "down"; } else if (st < lastscrolltop ){ direction = "up"; } lastscrolltop = st; stickymenu(direction); // check if @ bottom of page, if so, add class last <a> last div // isnt long enough scroll top of page , trigger active state. if($(window).scrolltop() + $(window).height() == $(document).height()) { sminta.removeclass('active') $(".smint a:not('.extlink'):last").addclass('active') } else { sminta.last().removeclass('active') } }); /////////////////////////////////////// $(this).on('click', function(e){ // gets height of users div. used off-setting scroll menu doesnt overlap content in div jst scrolled var myoffset = smint.height(); // stops hrefs making page jump when clicked e.preventdefault(); // hash of button clicked var hash = $(this).attr('href').split('#')[1]; var goto = $(myselector+'.'+ hash).offset().top-myoffset; // scroll page desired position! $("html, body").stop().animate({ scrolltop: goto }, scrollspeed); // if link has '.extlink' class ignored // courtesy of mcpacosy (@mcpacosy) if ($(this).hasclass("extlink")) { return false; } }); //this lets yo use links in body text scroll. add class 'intlink' button , scroll $('.intlink').on('click', function(e){ var myoffset = smint.height(); e.preventdefault(); var hash = $(this).attr('href').split('#')[1]; if (smint.hasclass('fxd')) { var goto = $(myselector+'.'+ hash).position().top-myoffset; } else { var goto = $(myselector+'.'+ hash).position().top-myoffset*2; } $("html, body").stop().animate({ scrolltop: goto }, scrollspeed); if ($(this).hasclass("extlink")) { return false; } }); }); }; $.fn.smint.defaults = { 'scrollspeed': 500, 'myselector': 'div'}; })(jquery); //call smint $(document).ready( function(){ $('.menubar').smint(); }); html{ background: #84b6f4; } .box{ position: absolute; top: 0; left: 0; height: 46px; width: 100%; margin: 0; padding: 0; background-color: black; } .nav{ position: fixed; top: 0; left: 0; height: 46px; width: 100%; font-family: arial; list-style-type: none; overflow: hidden; margin: 0; padding: 0; background-color: #18ac11; } .nav li{ float: left; } .nav li a{ display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } .nav li a:hover{ background-color: #11740b; } /*smint active section*/ .active { background: #25aae1; } .section1{ background: red; } .section2{ background: blue; } .section3{ background: yellow; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <body> <div class="menubar"> <ul class="nav"> <li><a href="#section1">selection1</a></li> <li><a href="#section2">selection2</a></li> <li><a href="#section3">selection3</a></li> </ul> </div> <div class="section1"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>section1</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="section2"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>section2</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="section3"> <br><br><br><br><br><br><br><br><br><br><br><br><h1>section3</h1><br><br><br><br><br><br><br><br><br><br><br><br> </div> </body>
here 2 fixes
scroll top
html, body { padding: 0; margin: 0; }
active menu item
.menubar { height: 46px; }
//jquery.smint.js /* smint v1.0 robert mccracken smint v2.0 robert mccracken awesome ryan clarke (@clarkieryan) , mcpacosy (@mcpacosy) smint v3.0 robert mccracken awesome ryan clarke (@clarkieryan) , mcpacosy (@mcpacosy) smint first dabble jquery plugins! http://www.outyear.co.uk/smint/ if smint, or have suggestions on how improved, send me tweet @rabmyself */ (function(){ $.fn.smint = function( options ) { var settings = $.extend({ 'scrollspeed' : 500, 'myselector' : 'div' }, options); // adding class users div $(this).addclass('smint'); //set variables needed var optionlocs = new array(), lastscrolltop = 0, menuheight = $(".smint").height(), smint = $('.smint'), sminta = $('.smint a'), myoffset = smint.height(); if ( settings.scrollspeed ) { var scrollspeed = settings.scrollspeed } if ( settings.myselector ) { var myselector = settings.myselector }; return sminta.each( function(index) { var id = $(this).attr('href').split('#')[1]; if (!$(this).hasclass("extlink")) { $(this).attr('id', id); } //fill menu optionlocs.push(array( $(myselector+"."+id).position().top-menuheight, $(myselector+"."+id).height()+$(myselector+"."+id).position().top, id) ); /////////////////////////////////// // initial top offset menu var stickytop = smint.offset().top; // check position , make sticky if needed var stickymenu = function(direction){ // current distance top var scrolltop = $(window).scrolltop()+myoffset; // if scroll more navigation, change position fixed , add class 'fxd', otherwise change absolute , remove class if (scrolltop > stickytop+myoffset) { smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addclass('fxd'); // add padding body make loss in heigt when menu goes fixed position. // when item fixed, removed flow height doesnt impact other items on page $('body').css('padding-top', menuheight ); } else { smint.css( 'position', 'relative').removeclass('fxd'); //remove padding added. $('body').css('padding-top', '0' ); } // check if position inside change 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(); // run function every time scroll $(window).scroll(function() { //get direction of scroll var st = $(this).scrolltop()+myoffset; if (st > lastscrolltop) { direction = "down"; } else if (st < lastscrolltop ){ direction = "up"; } lastscrolltop = st; stickymenu(direction); // check if @ bottom of page, if so, add class last <a> last div // isnt long enough scroll top of page , trigger active state. if($(window).scrolltop() + $(window).height() == $(document).height()) { sminta.removeclass('active') $(".smint a:not('.extlink'):last").addclass('active') } else { sminta.last().removeclass('active') } }); /////////////////////////////////////// $(this).on('click', function(e){ // gets height of users div. used off-setting scroll menu doesnt overlap content in div jst scrolled var myoffset = smint.height(); // stops hrefs making page jump when clicked e.preventdefault(); // hash of button clicked var hash = $(this).attr('href').split('#')[1]; var goto = $(myselector+'.'+ hash).offset().top-myoffset; // scroll page desired position! $("html, body").stop().animate({ scrolltop: goto }, scrollspeed); // if link has '.extlink' class ignored // courtesy of mcpacosy (@mcpacosy) if ($(this).hasclass("extlink")) { return false; } }); //this lets yo use links in body text scroll. add class 'intlink' button , scroll $('.intlink').on('click', function(e){ var myoffset = smint.height(); e.preventdefault(); var hash = $(this).attr('href').split('#')[1]; if (smint.hasclass('fxd')) { var goto = $(myselector+'.'+ hash).position().top-myoffset; } else { var goto = $(myselector+'.'+ hash).position().top-myoffset*2; } $("html, body").stop().animate({ scrolltop: goto }, scrollspeed); if ($(this).hasclass("extlink")) { return false; } }); }); }; $.fn.smint.defaults = { 'scrollspeed': 500, 'myselector': 'div'}; })(jquery); //call smint $(document).ready( function(){ $('.menubar').smint(); }); html, body { padding: 0; margin: 0; } html{ background: #84b6f4; } .menubar { height: 46px; } .box{ position: absolute; top: 0; left: 0; height: 46px; width: 100%; margin: 0; padding: 0; background-color: black; } .nav{ position: fixed; top: 0; left: 0; height: 46px; width: 100%; font-family: arial; list-style-type: none; overflow: hidden; margin: 0; padding: 0; background-color: #18ac11; } .nav li{ float: left; } .nav li a{ display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } .nav li a:hover{ background-color: #11740b; } /*smint active section*/ .active { background: #25aae1; } .section1{ background: red; } .section2{ background: blue; } .section3{ background: yellow; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <body> <div class="menubar"> <ul class="nav"> <li><a href="#section1">selection1</a></li> <li><a href="#section2">selection2</a></li> <li><a href="#section3">selection3</a></li> </ul> </div> <div class="section1"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>section1</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="section2"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>section2</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="section3"> <br><br><br><br><br><br><br><br><br><br><br><br><h1>section3</h1><br><br><br><br><br><br><br><br><br><br><br><br> </div> </body>
Comments
Post a Comment