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.
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 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.
I do a menu fixed top when scroll, it ok with some pages have large height, but in page has not enough height, this script loop:
Example:
I have menu with height 50px and i write a script:
if ($(this).scrollTop() > 50){
// add class fixed
} else { //remove class }
on pages with large height this run: scroll(over 50px) > add class
on pages with small height this run: scroll(over 50px) > add class > remove class
Please see this example: http://jsfiddle.net/F4BmP/2930/
Finally, i find a solution for my problem.
Reason make problem is HTML document lost height when menu change from static to fixed.Examble: Browser has 500px and has a scrollbar, when user scroll my menu change to fixed and browser lost 50px of menu, so browser not enough height to has scrollbar, it will return to top page and do code lines in ELSE statement.
So i add a div wrap my menu and set height the same height with my menu, this will make the height of document always the same on before and after scroll:
<div id="wrap" style="height:50px;width:100%">
<div id="mymenu"></div>
</div>
This solution solve my problem.
Use this javascript:
$(document).ready(function(){
var elementPosition = $('.menu').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('.menu').css('position','fixed').css('top','0');
$('.menu').css('width','100%');
$('.menu').css('z-index','500');
} else {
$('.menu').css('position','static');
}
});
});
Well, this code is working on my menubar, even if screen size is different .
Basic concept is user has to see the menu while scrolling the page.
But in your functionality is correct.There is no much content and User can see the menu in current screen itself. If there is more content user can scroll and get sticky menu always on top.
If you really want to make browser scroll you can give min-heightfor container.
Example
.containerclassname{
min-height: 1500px;
}
I tested your code in firefox and also in chrome , the issue seems to be in chrome . i reworked the code both html and JS and it works fine in chrome, for for that matter in any browser .
heres what should probably work for you :
$(document).ready(function(){
$(window).scroll(function (e) {
$el = $('.nav');
if ($(this).scrollTop() > 100) {
$('.nav').addClass("fixedNav");
}else {
$('.nav').removeClass("fixedNav");
}
});
});
the entire code is enclosed in a fiddle .
Link to fiddle
Kind regards .
Alexander .
I have made a function wich runs on the computer very well. But on mobiles the position refreshes only when the scrolling stops. Its a known problem and i found answers but I didnt get it in my function working. Maybe one of you can help me.
my function:
$(window).scroll(function () {
if ($(window).scrollTop() >600) {
$('#logo').css('position', "fixed");
$('#logo').css('top', 0);
}
else if($(window).scrollTop() < 600) {
$('#logo').css('position', "relative");
$('#logo').css('top', 600)
}
});
and in the internet i found this which i should replace in my function:
$('body').on({
'touchmove': function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
}
});
or this:
$('body').bind('touchmove', function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
});
It would be nice if someone could rewrite my function so that it works smoothly in mobiles.
Edit
I explain shortly what this function do. When you load my page there is a blackscreen with a headline. Nothing else. when you scroll up the title should move up normaly until he reaches the top. when it reaches the top it gets the "position: fixed" attribute. when you scroll down it gets the "position: relative" attribute again. Nothing else should happen.
But on mobiles the text scrolls up until the scrolling stops (most of the time you scroll the text out of the screen) and pop up on the fixed position. But when it fixed everything is ok and it stands there.
The problem might be in the fixed position rather than in the scrollTop. Fixed positioned elements are not very mobile friendly.
Its behavior depends on the mobile device and OS.
More info: http://bradfrostweb.com/blog/mobile/fixed-position/
For some reason you need to drag the window in jsfiddle to get it going, but it works fine onLoad in context.
The idea behind this is that if the content exceeds the height of the window, it will removeClass ".sticky" which is slamming the footer down absolute to the bottom of the page. Otherwise, it's a sticky footer.
It should be pretty elegant. My issue is that for a moment, the footer clips off the content. I want it to removeClass ".sticky" when the aqua background of the section[role="main"] meets the footer's purple background and not a pixel later. I can't seem to get this going.
The footer is always the same height... can I just subtract it from something?
$(document).ready(function(){
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').height() >= $(window).height() ) {
$('.footer').removeClass('sticky');
}
$(window).resize(function(){
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').height() <= $(window).height() ) {
$('.footer').addClass('sticky');
}
else {
$('.footer').removeClass('sticky');
}
});
});
Working example here:
http://jsfiddle.net/LxvQ9/ make sure to resize to get it going initallly. Again, this is some issue with jsFiddle. Works fine on my site onLoad.
Thanks for any help.
While calculating height of any element, we also need to consider padding and border if any.
In jQuery we use outerHeight to get the height of any element including padding and border.
So, in your case, we are using only height and that's why some text is clipping.
Use the following code to properly calculate the height and update the footer class.
JavaScript Code
$(function(){
//When Window is Resized
$(window).resize(makeFooterSticky);
//Run once on page load
mkaeFooterSticky();
});
function makeFooterSticky() {
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').outerHeight() <= $(window).height() - $('.footer').outerHeight() ) {
$('.footer').addClass('sticky');
} else {
$('.footer').removeClass('sticky');
}
}
Hope this should work.
Let me know if there are any issues.
JSFiddle Demo : http://jsfiddle.net/hVzat/3/