I use fullPage js script for my website. I have a problem.
I have some jquery that is changing my header elements when the visitor scrolls
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$("header").addClass("tab-2-header")
$(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-negative.png')
$("#menu li a:first").removeClass("active")
$("#menu li").addClass("negative-dotts")
$(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search-negative.png')
$(".search input").addClass("search-negative");
} else {
$("header").removeClass("tab-2-header")
$(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-positive.png')
$("#menu li a:first").addClass("active")
$("#menu li").removeClass("negative-dotts")
$(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search.png')
$(".search input").removeClass("search-negative");}
});
Basically this is the jquery that is changing my header.
All was working good till I had to make my website sectioned with fullpagejs. This script is hiding my scroll bar and if the scroll bar isnt visible, my jquery from above isnt starting because he doesn t know that the visitor is scrolling or because the scroll bar isnt visible.
In fullPagejs I can show the scrollbar so my header elements will show with :
scrollBar: true
If I add this line of code the scrollbar is visible and my jquery starts working.
The problem is that if I make the scroll bar visible, my website is going between sections with some lag (like framing). Any ideeas how I can solve this problem or If it s a posibility to hide the scroll bar but to be able to change my header on scroll ?
You can check the website without scrollbar here: http://bit.ly/1AGcZvd
And with scrollbar here: http://bit.ly/1C6VH8m
The one with scrollbar have some lag, deelay, I don t know how to name it ..
Cheers!
You don't need to use scroll bar to make it work.
If you are using scrollBar:false, then you should be using the callbacks provided by fullpage.js such as afterLoad which get executed after you reach a section.
You could even use the CSS class added by fullPage.js to the body element of the page on section change. And deal just with CSS for all it... which would be faster.
But if you still prefering to show the scrollBar and to deal with jQuery instaed of with CSS, then take into account that your code is being executed hundreds of times on every scroll and that's what causing the lag... you should better optimize it...
Something like this, which checks for a flag, would optimize it a lot:
var hasChanged = false;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 1 && !hasChanged) {
$("header").addClass("tab-2-header")
$(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-negative.png')
$("#menu li a:first").removeClass("active")
$("#menu li").addClass("negative-dotts")
$(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search-negative.png')
$(".search input").addClass("search-negative");
} else {
$("header").removeClass("tab-2-header")
$(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-positive.png')
$("#menu li a:first").addClass("active")
$("#menu li").removeClass("negative-dotts")
$(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search.png')
$(".search input").removeClass("search-negative");
hasChanged = true;
}else{
//whatever
//...
hasChanged = false;
}
});
And if you still want to improve it more, you could just use Javascript instead of jQuery.
But personally I would just deal with CSS.
Related
I have a form that is sticky on every page, and I need it to stop being sticky when it reaches the top of the footer. I have this working properly, but I need it to become sticky again when scrolling back up the page. Anything glaringly wrong?
$(window).scroll(function(){
var footerTopPos = $('#footer-wrapper').offset().top;
var navBottomPos = $('#footer-form-wrapper').offset().top;
if(navBottomPos >= footerTopPos) {
$('#footer-form-wrapper').addClass('sticky');
} else {
$('#footer-form-wrapper').removeClass('sticky');
}
});
To clarify, the first part works perfectly. The css changes from "fixed" to "absolute" and the form stays in place. The problem is, I want it to revert back to "fixed" when you start scrolling back up the page (my else statement). This part does nothing at all.
Here is a rough jsfiddle to show the issue http://jsfiddle.net/L693f5bg/14/
--Edit--
To keep what you have started with the same and not use any other plugins you have to make sure you are declaring the variable outside the scroll function so that it doesn't get changed every time you scroll and change its position.
$(function () {
var footerTopPos = $('#footer-form-wrapper').offset().top;
$(window).scroll(function () {
var windowTopPos = $(window).scrollTop();
if (windowTopPos >= footerTopPos) {
$('#footer-form-wrapper').css('position', 'absolute');
$('#footer-form-wrapper').css('top', '0');
} else {
$('#footer-form-wrapper').css('position', 'fixed');
$('#footer-form-wrapper').css('bottom', '0');
$('#footer-form-wrapper').css('top', 'auto');
}
});
});
Updated your JSFiddle
Personally I recommend using Waypoints.js and the sticky elements plugin. It does everything and it's super clean and easy to implement. include the jquery.waypoints.js and the sticky plugin then initialize using:
var sticky = new Waypoint.Sticky({
element: $('#footer-wrapper')[0],
offset: '90%',
stuckClass: 'unstuck'
});
I updated the JSFiddle using the Waypoints.js plugin
I am trying to do a effect like on the App Builder Website.
When the user is at the header with the background image/video and scrolls down, the site scrolls down to the next div/section/etc. .
If the user scrolls back up and the image/video part is reached, the page scrolls to the top of it. I have tried the following code but there is bug i can't find:
function scrollto(where){
$('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800);
console.log('Scrolled to ' + where);
closeMenue();
}
var lastScrollTop = 0;
var scroll = $(window).scrollTop();
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (scroll == 0){
scrollto('.about');
}
else{
}
} else {
if (scroll == 530){
scrollto('.parallax');
}
else{
}
}
lastScrollTop = st;
});
It is working fine, but only once. Is there a Plugin I can use?
Sorry for my bad english :(
The site you posted is making use of fullPage.js plugin.
It works using CSS3 transitions with a fallback to jQuery when needed.
If you don't want to use jQuery, there's even a pure javascript version for it in development but functional.
dont use jquery for smooth transitions.
is better do that things with css methods.
check this if want use any library
So, here's what I believe I'm seeing on their site if you want to do something similar:
No scroll bar; you'll need to make your top-most container have overflow: hidden. It might be best to capture scroll wheel events. See here for more details: Get mouse wheel events in jQuery?
The active viewport gets a class "active". They're presumably using it to keep track of which viewport to scroll to next and maybe to determine
So, in your scroll wheel event handler, you'll need to:
Determine first if you're going up or down. (Outlined in the SO link above)
You'll need to find the next sibling div/viewport/container/whatever that's not active.
You'll want to move the active class to that appropriate sibling (previous/next depending on up/down) and scroll it into view using scrollTop.
I'm fixing my nav to the top of the page. I'm using Bootstrap (CSS only). I'm using jQuery to hide one logo (img class .logo) and show another (img class .logo-sm), on scroll.
Everything basically works, except for one thing. The hiding function slides the main logo to the left as it fades out, but I'd like it to slide up. I'm pretty sure this is not .hide() function's default behavior, but I don't know jQuery very well so I'm not sure how to change it.
I built a JSFiddle to demonstrate the behavior. It doesn't work consistently for some reason (it does locally), but you can see the logo sliding left the first time you scroll down.
JSFiddle
The script:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").hide(100);
$(".logo-sm").show(200);
} else {
$(".logo").show(100);
$(".logo-sm").hide(200);
}
});
});
This is happening because .show() is applying display: inline-block when what you need is display: block.
To fix this, you need to find what's setting the header .logo css display value to be inline and change it to block. From the jquery api, show will set the display property to whatever it was set to initially. In this case, it's inline-block which is why your logo is moving to the left.
$.hide() only sets the display of the element to none. It doesn't animate. That behavior is probably caused by having transitions in your CSS.
If you want to animate the element with jQuery, you can use .slideUp() and .slideDown().
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
} else {
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
}
});
});
But you've got some other stuff going on in your fiddle that is causing some weirdness so this won't work much better. I would suggest not animating with jQuery, but use it to change classes on the elements and handle the animation with CSS transitions. Something like this:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").removeClass("showing");
$(".logo-sm").addClass("showing");
} else {
$(".logo-sm").removeClass("showing");
$(".logo").addClass("showing");
}
});
});
And then style the .showing class with transitions.
I'm using snap.js which enables you to slide your main content div over using css3 and javascript, revealing a menu underneath.
The problem I am having is that when I apply the class snap-content, which tells snap.js which div to slide, that being my main site wrapper, the elements relying on jQuery for their sizing behave unexpectedly.
Here's my situation.
I'm using jQuery to make an element fixed when scrolling past a certain point:
jQuery(document).ready(function ($) {
$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
if ($("#mainMenu").css('position') !== 'fixed') {
$("#mainMenu").css("position", "fixed");
}
} else {
if ($("#mainMenu").css('position') !== 'static') {
$("#mainMenu").css("position", "static");
}
}
});
});
When using snap.js I had to change $(window).scroll to $('#wrapper').scroll because the wrapper is now the scrollable content. I believe this could have something to do with my problem.
When the menu becomes fixed I use some jQuery to keep it the same width as the container it was inside before it became fixed:
jQuery(function ($) {
$(window).resize(_.debounce(function () {
var elementWidth = $('#sidebarWrapper').width();
$('#mainMenu').css('width', elementWidth + 'px');
}, 10));
});
This all works fine before I add the class snap-content, and I can resize the browser without any problems.
When the class is added the sizing no longer works.
There are other functions to do with sizing that start to act unexpectedly too but this is just an example.
I assumed it might be something clashing with my jQuery but I'm using jQuery(function($) so that should stop that right?
snap.js
instead of adding the event to the window scroll add it to the snapcontent since you are scrolling on the snapcontent div instead of the window
I'm really stuck with this one and have no idea how to solve this, I use jQuery ~ usually without too many problems. But as I don't write JS I do get stuck :(
I've searched and searched for answers and tried out too many approaches and not getting anywhere... :( I bet I'm missing something very obvious or simple, hoping someone might be able to help...
ok - the problem:
I have a website for my webdesign course which shows the main nav in the left column. For the smallest screens (ie below 420px width) - I want to hide the menu, displaying a 'view menu' link instead which uses the jQuery toggle() function to show / hide the menu on demand.
Initially, I did this via a straight forward toggle alone - all fine - apart from the issue that the menu would remain hidden once it was shown and hidden once on a small screen. If the window is resized - it would remain hidden.
That was the problem I set out to solve, mentioning it here as I might be going down the wrong path entirely here ~ doubting whether I'm doing this in the right way :'(
Now - I am using JS to hide the 'view menu' link for all screens, only showing on screens smaller than 420px. I've added the resize() function as well to allow more dynamic behaviour.
Everything is working as intended for the showing and hiding of my menu - BUT....
The toggle link itself is set to display:block - when the window loads below 420px, it displays as intended: set to block (spanning full width for a nicely solid active link) with the text centred.
However, when I load the page at larger window size, then resize to below 420px width - the toggle link seems to become inline? Not at full width any longer, text appears to be left aligned as the element no longer is full width...?!
I've tried setting width in CSS, tried resetting with via resize() element, via assigning 100% width via JS....nothing is working - I'm sure I'm missing something....
I'd really appreciate any pointers or thoughts ~ feel like I'm missing something very basic here....
the website: webeyedea.info
here's my JS code, following the link to jQuery:
// check for window size size on page load and show relevant content only
$(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// check for window resize - show nav again for larger screens after hiding
$(window).resize(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// show menu (smallest screens)
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow', function() {
// Animation complete.
});
$('ul').addClass('view');
});
UPDATE: SEE JSFIDDLE
When you call .show() on an element it sets the display property to the previous value and if it does not exist I believe it takes the default browser value which may be inline in your case. Try setting it explicitly to block.
I'm not sure what is doing what here since I don't have a mobile to test it, but could you try to replace your hide/show with a css function that toggle between display:none and display:block ?
Like this :
$('#toggle-nav').css('display','none');
$('#toggle-nav').css('display','block');
ALMOST ! NOT SOLVED
one solution, thanks to Vlad Radulescu (on Forrst) ~ via this jsfiddle fork
$('a#toggle-nav').css('display','none');
// Show the menu if Window width is less than 420
$(window).resize(function() {
if ( $(window).width() > 420 ) {
$('#toggle-nav').css('display','none');
$('nav ul').show();
}
else {
$('#toggle-nav').css('display','block');
$('nav ul').hide();
}
});
// Slide the Menu on smaller screens
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow');
});
See my revised fiddle
http://jsfiddle.net/HWmp3/9/
I tested this on the iphone simulator and it works. My test was I copied the codes to a local file and tested. I put all the js inside of document.ready
make sure you have the meta in the header
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">