I have a fixed header div with a 200px height. On scroll, the height is reduced until it reaches a certain height (40px). This gives the effect of the header turning into a fixed header once user reaches the content container.
This works smooth in Firefox and Chrome, however, Safari is glitchy. Particularly, when user scrolls back up and the header increases in height. See JS Fiddle here.
$(window).scroll(function () {
var $scrollTop = $(window).scrollTop(),
$element = $('.content-container').offset().top,
$distance = ($element - $scrollTop);
if ($scrollTop < $element - $newHeight) {
header.height($distance);
}
});
What is causing safari to glitch so much on the height increase? What can I do to smooth this out?
The way to smoothen out this effect in Safari is to change the approach all together. Instead of changing the height of the header on scroll, make the content container position:relative; and set a higher z-index. Then when scroll reaches the bottom of your header (or wherever point you'd like to make the header sticky), change the z-index of the header to be higher than the content container and set it's height to your desired size.
Here is the JS. Please see this JS Fiddle for demo and the rest of code (css, html).
$(window).scroll(function () {
if ($scrollTop > $element - $newHeight) {
header.height($newHeight).css("z-index", 1000);
}
else {
header.css("z-index", 100).height($oldHeight);
}
});
Also, consider using requestAnimationFrame instead of onScroll. It''ll be lighter weight.
Related
I have a .navbar.navbar-inverse.navbar-fixed-top navigation bar that always stays on top of the page. I have given the body a padding of 70 px and this works well with it.
The problem is if I resize the browser, then the nav-bar is no longer nice and neat with a fixed height. Instead it wraps all the items in it, the height of the nav bar becomes more than 70 px and covers parts of the page.
To fix this, I tried using JQuery to check the height of the nav bar and give body more padding, I put this in document.ready()
if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
$("html, body").css("padding-top", "150px");
}
However, this solution does not work because the browser is not reloaded when its size shrinks so therefore this check does not happen dynamically. So how do I fix this?
You can use the window resize event listener here. Something like this:
$( window ).resize(function() {
if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
$("html, body").css("padding-top", "150px");
}
});
Additionally you could also go the Bootstrap way and collapse and expand the Navbar into a button, depending on screen resolution. The above approach is slightly less than ideal IMO
I have a div in a div.
The first div has a unknown height. The second one has the height of 125px.
I want to make the second one a sticky div which is only sticky in this div.
The grey box is the container and the social media div next to it should be sticky.
After the container more content will come, so I cant use position: fixed. I tried to use position: absolute and change the top value or the transform: translate, but when I Do that Chrome is jittering around.
Code that I tried to use:
$offset = $(".social-media").offset().top;
$containerHeight = $(".sticky-container").height();
$bottom = $containerHeight + $(".sticky-container").offset().top;
$maxPoint = $containerHeight - $(".social-media").height();
$(window).scroll(function(){
if($(window).scrollTop() >= $offset){
if($(window).scrollTop() >= $bottom){
$(".social-media").css({transform: "translate(0px,"+$maxPoint+"px)"});
}else{
$scroll = $(window).scrollTop() - $offset;
$(".social-media").css({transform: "translate(0px,"+$scroll+"px)"});
}
}else{
$(".social-media").css({transform: "translate(0px,0px)"});
}
});
Since the jsbin you provided shows the solution works without jittering, the problem might lie in the repaints triggered by other elements of your site, not the code you pasted. Have a look at the Google's repaint optimization guidelines, it might help you identify the issues that cause the jittering.
I'm currently developing a website that that has a fixed banner div that is centered, and I'm using the jQuery below to ensure that it scrolls correctly even though it is a fixed positioned div.
jQuery:
$(window).scroll(function() {
$('#top-content').css('left', -$(this).scrollLeft() + "px");
});
However, I have come across an issue within IE(version 9). The issue is that when the user scrolls the website (creating a minus left margin on the "top-content" div, to give the effect of scrolling) and then if they maximize the webpage, the left margin is still present causing the div to not be centered.
I have attempted to remedy this with the jQuery below, but as of yet no luck
$(window).resize(function() {
if ($("#top-content").width() < $(window).width()) {
$('#top-content').css('left:0px');
}
});
Any ideas?
You better do
$('#top-content').css('left', '0px');
In your resize event.
I can't handle such a mind-breaker:
It's common approach to hide page scroll when a tall popup shows. But when you set overflow: hidden to html and body elements, the content automatically returns to it's top (scrollTop: 0). It's no problem to keep scrollTop position, and reset it on popup's disappearing. But if you use transparent mask, user will see unnecessary jump from current scroll position to the top. How to escape this?
In the current Chrome and Firefox, I can set overflow: hidden only to html element to reach what I want, but it's not working on mobile devices.
Maybe someone can propose a good cross-browser solution.
I don't think this should be happening. I would look at the popup code to see if it's the culprit sending the page to the top and using subpar css to position the popup element.
In any case, here's code that ought to counter the behavior you're encountering. Since I cannot reproduce the problem, I cannot test my proposed fix. I think you'll find though that your pop up will be scrolled away out of view.
function keepScroll(){
var x = $('body').scrollLeft() + $(document.documentElement).scrollLeft();
var y = $('body').scrollTop() + $(document.documentElement).scrollTop();
$('html').css({
'overflow':'hidden'
});
$('body').css({
'overflow':'hidden'
});
$(window).scrollTop(y).scrollLeft(x);
}
The sicky footer layout has html and body height equal to '100%'. And when you set overflow:hidden it crops all the content and returns it to the top position.
To avoid this, you should set html and body height to 'auto' if scroll exists (you should check it to keep sticky footer behavior)
function keepScroll(){
var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} : {'overflow':'hidden'};
$('html, body').css(keepCSS);
}
See the fiddle, for live demo
Edit 1
This solution is still not working on mobile (overflow: hidden doesn't disable scrolling on iPad, the position 'fixed' fix for body throw the content to the top), so the issue is open
Edit 2
Find a fix, for mobiles. Maybe it isn't so clean, but works.
var scrollKeeper = (function() {
var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} : {'overflow':'hidden'},
scrollTop = 0;
return {
keep : function() {
scrollTop = $(window).scrollTop();
$('body').css({'position': 'fixed', 'width':'100%', 'top': -scrollTop + 'px'});
$('html, body').css(keepCSS);
},
release : function() {
$('html, body').removeAttr('style').scrollTop(scrollTop);
}
}
})();
Tip: Of course in the real development you should use css classes to avoid removeAttr(style) etc.
Tested on iPhone and Ipad (iOS 8+).
The fiddle http://jsfiddle.net/m1eav032/5/
I'm styling an element with position fixed and other css in a certain condition ( basically if the user scrolls up ), but the element is behaving like a relative positioned element. In other words, it is scrolling with the page and not remaining fixed.
I tried isolating this issue, but this issue only exists in this site as a whole and I need it to work in this site.
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st<=lastScrollTop){
//scroll up
if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
}
else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
lastScrollTop = st;
});
Right now the class .slideIn has no styling associated with it, but .stickySearch does.
Here is the CSS:
.stickySearch{
width:56% !important;
position:fixed !important;
left:0;
right:0;
}
I checked in developer tools and the class is being applied and the styles are being applied, but the position fixed is just not working.
Here is a live URL: http://goo.gl/ns6UEQ
Note, it helps to have a small window in height so you can scroll. Scroll down so that the header is hidden up top and then scroll up and the search bar should appear, but the moment the header comes back into view the search bar will go back into place in the header.
This is a bug that exists in CSS and in Chrome and Firefox's implementation of CSS.
When you have a parent element that has backface-visibility or is transformed, its children can not be fixed.
More here: http://www.sitepoint.com/forums/showthread.php?1129352-CSS3-tip-of-the-week-No-1&highlight=chrome+bug+fixed
Solution: remove the transform and backface visibility styling from #container
Change the if statement to something like below
var lastScrollTop=0;
$(window).scroll(function(){
if($(this).scrollTop()>150 && lastScrollTop>$(this).scrollTop()){
$('#fixedinput').addClass('fixed');
} else {
$('#fixedinput').removeClass('fixed');
}
lastScrollTop=$(this).scrollTop();
});
JSFiddle demo
As you scroll down past the grey part the will not be fixed, but once you start scrolling up it will.