I try to create a parallax scroll with fullPage JS
GitHub url: https://github.com/alvarotrigo/fullPage.js
Demo: http://alvarotrigo.com/fullPage/
So this fullPage.js is exactly what I need for my website but the problem is that when the visitor scrolls, the header background need to be changed like so:
<header>
<div class="logo"><img src="img/logo-positive.png" alt="" /></div>
</header>
when scroll=0
header {
background:red;
}
when scroll >= 1
header-negative {
background:blue;
}
I made it working with jquery using
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$("header").addClass("header-negative");
} else {
$("header").removeClass("header-negative")
;}
});
But now, using this fullPage.js script, I don't know why but the script is making my scroll bar disappear so I guess the browser doesn't know if the visitor is scrolling or not and the header isn't changing.
The website is here: http://bit.ly/1C1PnN9
I appreciate your help, ty!
Done guys, the problem was that i was need to display the scroll bar from fullPage.js with scrollBar: true :)
I was right, if the browser isn's detecting the scroll bar the jquery will not add any class. Too bad, i don't like that scroll bar on full page scroll website but ....
Related
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');
}
}
...
}
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 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'm currently developing the frontend of a website which is single page with smooth scrolling between divs.
I want to disable scrolling by mouse itself.
I know overflow:hidden; removes the scroll bars, however, I want the page to scroll only when they click on the link to the required div. What is the correct way to go about it?
Try this:
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('DOMMouseScroll',wheel,false);
}
function wheel(event)
{
event.preventDefault();
event.returnValue=false;
}
window.onmousewheel=document.onmousewheel=wheel;
</script>
I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});