jquery - Implementing fixed position in javascript causes jitter in Safari when scrolling -
fixed position not work use case because fixed browser window , can in state text off screen right , can not it. anyways, have attempted use absolute positioning , adjusting "top" in javascript. works pretty in firefox , chrome, in safari content jitters when scroll.
<div class="fixed sticky" data-offset-top="50"><p>fixed</p></div> $(document).ready(function() { var documentheight = $(document).height(); $(document).scroll(function() { var scrolltop = $(window).scrolltop(); $(".sticky").offset(function() { $this = $(this); var offsettop = $this.data("offset-top"); if (scrolltop < 0) { scrolltop = 0; } var newtop = offsettop + scrolltop; if (newtop < offsettop) { newtop = offsettop; } // prevents document infinitely expanding. var maxtop = documentheight - $this.height(); if (newtop > maxtop) { newtop = maxtop } // prevents bit of jitter since current offset can // not precisely initial offset. 338 vs. 338.12931923 var currenttop = $this.offset().top; if ( math.abs(currenttop - newtop) >= 1 ) { return { top: newtop } } else { return {} } }); }); })
i think understand trying achieve.
if keep fixed positioning on element , reposition horizontally javascript/jquery can keep smooth vertical scrolling , allow keep horizontal positioning:
$(function() { var $sticky = $('.sticky'); var target = 800; $(document).scroll(function() { var left = $(window).scrollleft(); var adj = target - left; $sticky.css({left: adj}); }); });
this uses scrollleft() horizontal counterpart scrolltop()
Comments
Post a Comment