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.
Related
I am trying to get the height of my navigation and apply it to a margin-top so I can offset my banner. My navigation is fixed so I'm trying to compensate for that so my banner isn't hidden underneath.
// Offset Banner to Height of Navigation
function bannerOffset() {
var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
}
This, I thought would do it, but it doesn't reflect anything at all in the front-end.
UPDATE
$(document).ready(function() {
var bannerTop = $('.x-navbar').outerHeight();
$('.x-main').css('margin-top', bannerTop);
$(window).scroll(function() {
var bannerTopScroll = $('.x-navbar.scroll').outerHeight();
if ($(document).scrollTop() > 1) {
$('.x-main').css('margin-top', bannerTopScroll);
}
});
});
So I thought I had this, but on load, the margin-top of .x-main is 245px. When I scroll it becomes 85px. I can see the numbers go down to that. The issue is when I scroll back up to the top the value doesn't go back to 245px. It's not very consistent, but I often get 144px. I should add that, and this is probably why, I have another function that changes the height of my .x-navbar when .scroll is added to it.
$(window).scroll(function() {
if ($(document).scrollTop() > 1) {
$('.x-navbar').addClass('scroll');
} else {
$('.x-navbar').removeClass('scroll');
}
});
So I am not sure how to make this all smooth and working properly. If I reload the page the .x-mainis back to 245px. When I scroll back to the top it's not calculating properly.
Your code works. Maybe you want to use $.outerHeight() instead, your selectors are wrong, or you're experiencing margin collapsing.
It's worth noting that $.height() returns an integer value, so in your $.css() line, you should change bannerTop to bannerTop + 'px' so that the CSS has a unit and not just a number... but it looks like jQuery is doing that automagically for me here. You might try it and see.
var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x-navbar">x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br></div>
<div id="banner-carousel">banner carousel</div>
I looked through this website for similar question, but couldn't find any.
So I've been working on a website with bootstrap3 for a little bit now and most of the formatting/design part is done, but have one problem I can't solve myself.
I added Jquery to make the navbar shrinks and changes background color when users scroll down to a certain point.(Thanks to peeps helped me out here)
It kind of works, but the movement of it is really weird.
When load the page, the navbar is already shrunk and background is colored, but when scrolled a little bit it blows up in size and the background disappears, and when scrolled even more to the point where I set Jquery to start working, navbar shrinks back and background color changes again.
It's hard to explain in writing, so please see the website and see what I'm talking about.
Below is the website I'm working on.
Test website
I'm assuming its the Jquery not working when loaded, so the CSS setting supposed to be hidden(shorter navbar height and background color) isn't hidden initially.
Below is the jquery code:
$(document).ready(function(){
$(window).scroll(function () {
if ($(window).scrollTop() > 70) {
$("#top-bar").addClass('animated-header');
} else {
$("#top-bar").removeClass('animated-header'); }
});
$("#clients-logo").owlCarousel({
itemsCustom : false,
pagination : false,
items : 5,
autoplay: true,
})
});
Thanks for the help in advance!
Nice website!
Take a look at your header element, you will see that you already put the animated-header class there which causes the problem. Here is your code:
<header id="top-bar" class="navbar-fixed-top animated-header">
What you can do is simply remove that class, and your script above will help deal with adding/removing this class base on the scrollTop value. Something like this will help:
<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header -->
We are setting our scroll position back to zero, so this works fine. Add this,
$(document).ready(function () {
$('html,body').animate({
scrollTop : 0
},10);
});
$(document).ready(function () {
$(window).scroll(function(){
if($(window).scrollTop() >= 70){
$("#top-bar").addClass("animated-header");
}
if($(window).scrollTop() <= 70){
$("#top-bar").removeClass("animated-header");
}
});
});
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.
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">