I have just finished a site for a garage, there is a header with nav under it, and on scroll the nav become fix at the top of the screen. Usually very simple and have had no problems doing this on other sites. However, on this particular project, if loaded on a mobile phone, 9 times out of 10 there is an issue with the nav jumping up on scroll, briefly leaving a white strip where the padding is added to the page to accommodate the new status of the nav which has jumped up early.
The site is http://telstargarage.com and no matter what I do, this site will not let me post the code, as it says it is not properly formatted, even if I follow the help, and it all looks sweet in the preview, it will not post, so please feel free to fork the site.
It's difficult to diagnose as you haven't posted any code.
I'm guessing your issue is here though:
$(document).ready(function () {
var menu = $('.menu');
// This is likely incorrect on document ready
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('navbar-fixed-top');
$('.scrolled').addClass('menu-padding');
} else {
$('.menu').removeClass('navbar-fixed-top');
$('.scrolled').removeClass('menu-padding');
}
}
...
}
I suggest going about this a different way. Perhaps by changing the offset you're comparing it to to the offset of a container of the menu. That gets around the issue of resizing screens causing the original offset calculation to be incorrect too. Something like this
<div class="menu-container">
<div class="menu">
// Your menu in here
</div>
</div>
With JS like this:
$(document).ready(function () {
function scroll() {
if ($(window).scrollTop() >= $('.menu-container').offset().top) {
$('.menu').addClass('navbar-fixed-top');
$('.scrolled').addClass('menu-padding');
} else {
$('.menu').removeClass('navbar-fixed-top');
$('.scrolled').removeClass('menu-padding');
}
}
...
}
Related
I have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.
So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.
Below is the javascript for scrolling changes.
var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');
$(function () {
var position = $(window).scrollTop();
if (exploreOpen) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-open--header-full');
$('#wrapper-site-header').addClass('explore-open--header-reduced');
} else {
$('#wrapper-site-header').addClass('explore-open--header-full');
$('#wrapper-site-header').removeClass('explore-open--header-reduced');
}
position = scroll;
});
} if (exploreClosed) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-closed--header-full');
$('#wrapper-site-header').addClass('explore-closed--header-reduced');
$('#wrapper-site-header').addClass('SEEME123');
} else {
$('#wrapper-site-header').addClass('explore-closed--header-full');
$('#wrapper-site-header').removeClass('explore-closed--header-reduced');
}
position = scroll;
});
} else {}
});
The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.
I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..
$(function () {
var position = $(window).scrollTop();
if (('#explore').hasClass('open')) {
), and as separate functions.
Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/
Thank you all for your help and advice.
EDIT: Additional information.
I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.
I've seen a few different threads seemingly about this but none of the answers in them have a working solution for me.
Here's what I want:
Big transparent header with a big logo on the top.
Small colored header with a small logo when user has scrolled past the topmost area.
I'm using navbar-fixed-top and and Bootstrap's scrollspy to add and remove certain classes from the header.
Here's why it hasn't worked so far:
$(window).scrollTop() doesn't return anything meaningful at all.
It seems wrong to change at a certain amount of pixels from the top anyway, since it can vary between screen resolutions.
Initiating a change based on what activate.bs.scrollspy captures works rather well except it shows the wrong header when I load the page for the first time.
It seems impossible to place a <div id="whatever"> at a certain spot and have the header change when scrollspy finds it. I've tried making the div 1px in dimension and placed at the absolute top of the page, but the scrollspy still identifies it from way off.
Here's my jQuery code at the moment, which is very imprecise AND shows the wrong header at the first load of the page (remember, you're not always at the top of the page when loading (reloading) the page!).
$(document).ready(function() {
$('body').scrollspy({ target: '.navbar-inverse' });
$('#main-header').on('activate.bs.scrollspy', function () {
var currentItem = $('.nav li.active > a').text();
var header = $('.navbar');
var logosmall = $('.small-brand');
var logobig = $('.big-brand');
if (currentItem == 'top' && header.hasClass('navbar-small')) {
header.removeClass('navbar-small');
header.addClass('navbar-big');
logosmall.css('display', 'none');
logobig.css('display', 'inline-block');
}
else if (currentItem != 'top' && header.hasClass('navbar-big')) {
header.removeClass('navbar-big');
header.addClass('navbar-small');
logobig.css('display', 'none');
logosmall.css('display', 'inline-block');
}
});
});
Wrap your code into window scroll event as mentioned below then only $(window).scrollTop() will work as you expecting.
$(window).scroll(function () {});
Here is a great example of your problem, it is a bit tricky to shrink your navbar but not impossible. You have to take into account a lot of things. I found this a while ago: http://www.bootply.com/109943
It is really strange that $(window).scrollTop() does not return anything by the way. What browser are you on? And your problem with reloading the browser:
$(window).load(function{
//logic to check how far scrolled
})
I have some CSS-driven parallax scrolling on my site, and I would also like to have a fixed top navigation bar appear when the user begins to scroll down the page. Currently, the nav bar only appears after you have scrolled PAST the end of the window (and disappears again when the window has "rubber banded" back into position). I'm using Chrome v38 on a Macbook. It looks like the overflow-x in my CSS is causing the scroll not to register/fire, but that's necessary for the parallax effect. Any help would be appreciated. Thanks.
CodePen example: http://codepen.io/anon/pen/jEPqYL (doesn't work exactly like in a browser, but that is my current code.)
My JS is:
(function($) {
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
})(jQuery);
I have a facebook "like us" icon on one site, now client requirement is to keep it visible when user scrolls the up until it reaches the top position of page (which is sorted by using jquery stickynotes) and the icon should still be visible when somebody re-size the browser (X = (browser width/2) + (wrapper/2)).
Not able to make out how can I do that, since first condition forces the div to be static positioned so that it can move-along when the page is scrolled down.
But in order to re-position it I'll require to make the potion fixed.
Kindly suggest a way out.
Just a simple example how you can fix that:
function movement() {
var topPosition = $(window).scrollTop();
if(topPosition > 100) {
// do something
$('element').addClass('dosomething');
} else {
// do something
$('element').removeClass('dosomething');
}
}
$(document).ready(function() {
$(window).scroll(function() {
movement();
});
});
Have you looked at something like jQuery Waypoints?
I'm not sure it's an exact match, but it solves some of these problems elegantly.
Not too long ago I asked about setting up a DIV which scrolls with the rest of the page. Post can be found here.
I've set this up, using the following code:
JS..
jQuery(function ($) {
var el = $('#sidebar'),
pos = el.position().top;
alert(pos);
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
});
CSS..
/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0}
A copy of the page can be found here. The alert was just some debugging.
The problem is, when you scroll a small amount, #sidebar suddenly appears at the very top of the page. In addition, sometimes as you scroll further down, the sidebar appears - and sometimes it doesn't.
Any idea what might be causing such seemingly random functionality?
I'm still trying to figure out why it works in the first place in the jsfiddle example, but anyway, I know how to fix it:
$(window).scroll(function() {
if($(this).scrollTop() >= pos){
el.addClass('fixed');
}else{
el.removeClass('fixed');
}
});
I tested this by unbinding the event you had and replacing it with this code. It seemed to work fine.
The reason I can't understand why it works in the example: toggleClass should be constantly adding and removing "fixed" if you have scrolled enough, because the conditional is true (true here means whether to toggle). The constant adding and removing of the fixed class causes the jumpy behavior.
You can watch this on your page: open up some dev tools (firegubg or Chrome) and watch what happens to your sidebar element.
[UPDATE]
Actually, I misread the docs. True means the class should be added (I don't think the docs are very clear though). Thus... the only way I could explain this is if #dunc was running jQuery v1.2 and the switch was getting ignored completely...