jQuery-One-Page-Nav icon indicating copy to clipboard operation
jQuery-One-Page-Nav copied to clipboard

Change scrollOffset dynamically in version 2.2

Open azeemdwt opened this issue 8 years ago • 5 comments

I would like to change scrollOffset dynamically. On initial scroll down, then half div hides beneath the fixed menu. scrolling up is fine when set scrollOffset = 145. Is there any way to do that without hacking the plugin code ? Thanks

azeemdwt avatar Apr 13 '16 01:04 azeemdwt

I would recommend using padding + negative margin to do this instead of changing the value with JS

davist11 avatar Apr 18 '16 15:04 davist11

Thanks for your response. Much appreciated it. Will give it a go to test.

azeemdwt avatar Apr 21 '16 04:04 azeemdwt

i do it.

(function($,window,document,undefined){var OnePageNav=function(elem,options){this.elem=elem;this.$elem=$(elem);this.options=options;this.metadata=this.$elem.data("plugin-options");this.$win=$(window);this.sections={};this.didScroll=false;this.$doc=$(document);this.docHeight=this.$doc.height()};OnePageNav.prototype={defaults:{offsetHeight:0,navItems:"a",currentClass:"current",changeHash:false,easing:"swing",filter:"",scrollSpeed:750,scrollThreshold:0.5,begin:false,end:false,scrollChange:false},init:function(){this.config=$.extend({},this.defaults,this.options,this.metadata);this.$nav=this.$elem.find(this.config.navItems);if(this.config.filter!==""){this.$nav=this.$nav.filter(this.config.filter)}this.$nav.on("click.onePageNav",$.proxy(this.handleClick,this));this.getPositions();this.bindInterval();this.$win.on("resize.onePageNav",$.proxy(this.getPositions,this));return this},adjustNav:function(self,$parent){self.$elem.find("."+self.config.currentClass).removeClass(self.config.currentClass);$parent.addClass(self.config.currentClass)},bindInterval:function(){var self=this;var docHeight;self.$win.on("scroll.onePageNav",function(){self.didScroll=true});self.t=setInterval(function(){docHeight=self.$doc.height();if(self.didScroll){self.didScroll=false;self.scrollChange()}if(docHeight!==self.docHeight){self.docHeight=docHeight;self.getPositions()}},250)},getHash:function($link){return $link.attr("href").split("#")[1]},getPositions:function(){var self=this;var linkHref;var topPos;var $target;self.$nav.each(function(){linkHref=self.getHash($(this));$target=$("#"+linkHref);if($target.length){topPos=$target.offset().top;self.sections[linkHref]=Math.round(topPos)}})},getSection:function(windowPos){var returnValue=null;var windowHeight=Math.round(this.$win.height()*this.config.scrollThreshold);for(var section in this.sections){if((this.sections[section]-windowHeight)<windowPos){returnValue=section}}return returnValue},handleClick:function(e){var self=this;var $link=$(e.currentTarget);var $parent=$link.parent();var newLoc="#"+self.getHash($link);if(!$parent.hasClass(self.config.currentClass)){if(self.config.begin){self.config.begin()}self.adjustNav(self,$parent);self.unbindInterval();self.scrollTo(newLoc,function(){if(self.config.changeHash){window.location.hash=newLoc}self.bindInterval();if(self.config.end){self.config.end()}})}e.preventDefault()},scrollChange:function(){var windowTop=this.$win.scrollTop();var position=this.getSection(windowTop);var $parent;if(position!==null){$parent=this.$elem.find('a[href$="#'+position+'"]').parent();if(!$parent.hasClass(this.config.currentClass)){this.adjustNav(this,$parent);if(this.config.scrollChange){this.config.scrollChange($parent)}}}},scrollTo:function(target,callback){var offset=$(target).offset().top-this.config.offsetHeight;$("html, body").animate({scrollTop:offset},this.config.scrollSpeed,this.config.easing,callback)},unbindInterval:function(){clearInterval(this.t);this.$win.unbind("scroll.onePageNav")}};OnePageNav.defaults=OnePageNav.prototype.defaults;$.fn.onePageNav=function(options){return this.each(function(){new OnePageNav(this,options).init()})}})(jQuery,window,document);

add the offsetHeight

then

$('#navUl li:eq(0)').addClass('current'); $('#navUl').onePageNav({ offsetHeight: 67, currentClass: 'current', changeHash: false, scrollSpeed: 750, scrollThreshold: 0.2, filter: ':not(.external)', easing: 'swing', begin: function() { }, end: function() { }, scrollChange: function($currentListItem) { } });

romy2012 avatar Sep 20 '16 03:09 romy2012

scrollOffset should still be configurable with scrollTop. Could you please undo the removal? Ofcourse css solution should be prefered but there should still be an option to use javascript. As said here, it would be nice to change scrollTop after init, too.

MickL avatar Jun 13 '17 14:06 MickL

I would like to concur on the scrollOffset option. Although using padding and negative margin can do the job, sometimes using JavaScript solution would be optimal due to pre-designed layout which is not easy to change.

ianthedev avatar Sep 08 '19 10:09 ianthedev