I have a "sticky" side bar using this plugin: https://github.com/AndrewHenderson/jSticky . Basically, it works well on desktop but on touch devices it delays a second or two until the page is fully scrolled to re-appear in its proper place. Is there any way to make it scroll WHILE the page is scrolling as on desktop? I have seen sticky elements on other sites work like this, so there should be a way check and implement the position smoother. The code is below. All you do is assign a .sticky class to an item. For a demo, you can see this page I'm working on: http://www.mjmlawoffice.com/responsive/index.php/fees
<script>
jQuery(function(){
jQuery(".sticky").sticky({
topSpacing: 0,
zIndex:2,
stopper: "#footer"
});
});
</script>
;(function($) {
$.fn.sticky = function(options) {
var defaults = {
topSpacing: 0, // No spacing by default
zIndex: '', // No default z-index
stopper: '.sticky-stopper' // Default stopper class, also accepts number value
},
settings = $.extend({}, defaults, options); // Accepts custom stopper id or class
// Checks if custom z-index was defined
function checkIndex() {
if (typeof settings.zIndex == 'number') {
return true;
} else {
return false;
}
}
var hasIndex = checkIndex(); // True or false
// Checks if a stopper exists in the DOM or number defined
function checkStopper() {
if ( 0 < $(settings.stopper).length || typeof settings.stopper === 'number' ) {
return true;
} else {
return false;
}
}
var hasStopper = checkStopper(); // True or false
return this.each(function() {
var $this = $(this),
thisHeight = $this.outerHeight(),
thisWidth = $this.outerWidth(),
topSpacing = settings.topSpacing,
zIndex = settings.zIndex,
pushPoint = $this.offset().top - topSpacing, // Point at which the sticky element starts pushing
placeholder = $('<div></div>').width(thisWidth).height(thisHeight).addClass('sticky-placeholder'), // Cache a clone sticky element
stopper = settings.stopper,
$window = $(window);
function stickyScroll() {
var windowTop = $window.scrollTop(); // Check window's scroll position
if ( hasStopper && typeof stopper === 'string' ) {
var stopperTop = $(stopper).offset().top,
stopPoint = (stopperTop - thisHeight) - topSpacing;
} else if (hasStopper && typeof stopper === 'number') {
var stopPoint = stopper;
}
if (pushPoint < windowTop) {
// Create a placeholder for sticky element to occupy vertical real estate
$this.after(placeholder).css({
position: 'fixed',
top: topSpacing
});
if (hasIndex) {
$this.css({ zIndex: zIndex });
}
if (hasStopper) {
if (stopPoint < windowTop) {
var diff = (stopPoint - windowTop) + topSpacing;
$this.css({ top: diff });
}
}
} else {
$this.css({
position: 'static',
top: null,
left: null
});
placeholder.remove();
}
};
$window.bind("scroll", stickyScroll);
});
};
})(jQuery);
this is because your css selector for @media screen and (min-width: 768px) *js-mainnav.megamenu-sticky
is only displayed on a desktop with min-width 768px
the attribute that it needs are not on smaller browser are not included.
try adding
#js-mainnav.megamenu-sticky {
z-index: 1000;
position: fixed !important;
}
outside the mediaquery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.