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);
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'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 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/
Ok so the effect I am trying to emulate can be found on the nexus 5 site - http://www.google.com/nexus/5/ - when you scroll to the phone section. I've viewed source and looked through the code but there is over 13k lines of js so it was a waste.
Anyways what I did was add a class to fix the position of the images and created a background div that was like 5000px so it would appear to be fixed. The js fixed the position after the screen reached a certain point and then removed the fixed class after the end of the div.
My question is that i know this can be done better than my janky 'hack'. I'd love to hear your thoughts on better implementation.
This is part of the code that adds the fixed class
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".container").addClass("fixed");
}
if (scroll >= 8000) {
$(".container").removeClass("fixed");
}
});
Try this guide:
http://blog.teamtreehouse.com/multiplane-design-with-svgs-and-css-3d-transforms
Demo: http://codepen.io/nickpettit/full/eBCrK
Haven't done something like this before myself however. Also just a note that fixed position elements from my experience act up when viewed on tablet/smartphone.