Sticky nav with parallax banner - javascript

I'm working on a mock clothing site. I have a parallax banner and a nav below it. What I'm trying to achieve is having the nav stick to the top of the page once the user actually scrolls past the nav. I am able to get the nav to stick to the top of the page, but it does so while still on the banner image.
Here's the CSS
.banner {
background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}
nav {
border-top: solid #000 1px;
background-color: #fff;
padding: 5px;
margin: 0 0 50px 0;
}
.sticky {
position: fixed;
width: 100%;
top:0;
border-bottom: solid black 1px;
box-shadow: 0 2px 5px dimgray;
}
Here's the jQuery
$(window).on('scroll', function() {
if($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
And here's my fiddle demonstrating the issue.
I've had a few theories on why this is happening.
At first I thought maybe it's happening because my top is set to 0, but when I changed the value it still triggered .sticky, but just floated in the middle of the page.
Then I thought, maybe it was because I attached scrollTop() to window. I tried attaching it to nav like this
if($('nav').scrollTop()) {
//add class
}
and that didn't work either.
Thanks in advance for any insight you guys might have!

First of all you will have to check if you the scroll top is bigger then a the value it should be scrolling to the top. If you did that, you should be able to just add a class to that item or remove it.
Example:
var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > slide) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
You will need a class with the property display: none; and a class with the property display: block;
The property of display: none; says that the element will not be shown on the page. display: block is the default display property for the nav / div element.

Related

Navbar with fixed position staying on the top while header disappear

I want to make navbar with fixed position. At the top of the page the navbar should be under the header and after scrolling down when header is no longer visible the navbar should be at the top of the page. How can I do that? When I try to do it after scrolling down between the navbar and top of the page is still the height of the header(even though it is no longer visible).
Here is my css:
header{
background-color: red;
width: 100%;
height: 100px;
}
nav{
position: fixed;
float:left;
height: 100px;
width: 100px;
margin-left: 10px;
margin-right: 50px;
margin-top:50px;
background-color: green;
}
main{
background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;
}
and jfiddle: https://jsfiddle.net/pg2kwk5e/
You can add a class to the nav element with javascript after scrolling a certain amount.
I've used Jquery as it's faster and easier to show this in action.
Example
I'm just adding a class .fixedTop to the nav after the window scrolls more than 150 pixels, the class itself just has top:0;margin0; to move the absolute positioned element to the top and remove the margin which was set before.
Code:
var $nav = $("nav"),
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$nav.addClass('fixedTop');
} else {
$nav.removeClass('fixedTop');
}
})
CSS:
.fixedTop {
top: 0;
margin: 0 !important;
}

How do I make a link remove a class from a div using jQuery?

Edit: I fixed my problem, apparently jQuery 2.1.4.js wasn't found. #stupidmistakesthatyouoverlook thanks to all who responded and helped! It was very useful!
The Problem
I want a link to remove a class from a div so that it will show the contents and fade-in or out depending on the situation; however, my code (shown below) isn't accomplishing that task and I don't know why? Any Ideas?
My Code
Assume that I have an index.html that includes nav.jade and about.jade. For reference, I am using Jekyll.
(nav.jade)
section.nav
ul#navList
li
a(href="#")#video-link
i.fa.fa-youtube-play
| Music Video
(about.jade)
.video-overlay.hide
.video-container
<iframe width="853" height="480" src="https://www.youtube.com/embed/EN5xqCNbf9c" frameborder="0" allowfullscreen></iframe>
a(href="#").hide-cta Close this Video
(about.sass)
.video-overlay
display: flex
justify-content: center
align-items: center
position: fixed
left: 0
right: 0
top: 0
bottom: 0
background-color: rgba(0, 0, 0, 0.5)
z-index: 50
.video-container
width: 853px
height: 480px
background-color: black
padding: 5px
.hide-cta
position: absolute
top: 80%
left: calc(50% - 85px)
text-align: center
text-decoration: none
padding: 5px 10px
color: white
border: 2px solid white
transition: all 0.3s ease-in-out
margin-top: 30px
&:hover
color: black
background: white
border: 2px solid white
.hide
display: none
(functions.js)
$(function() {//shorthand for $('document').ready(function () {}
$('#video-link').on('click', function() { //check if link was clicked
$('.video-overlay').removeClass('.hide'); //unhide the div
$('.video-overlay').fadeIn('slow'); //fade the div in
return false; //if it wasn't clicked return false
});
$('#hide-cta').on('click', function() { //check if link was clicked
$('.video-overlay').addClass('.hide'); //make the div hide itself
$('.video-overlay').fadeOut('slow'); //fade the div out
return false; //if it wasn't clicked return false
});
});
This is a common syntax error that many people stumble into. I have been guilty of it in the past as well. Do not user selectors in the addClass and removeClass function calls. Just use the class name.
So the calls should look like
$('.video-overlay').removeClass('hide'); //unhide the div
and
$('.video-overlay').addClass('hide'); //make the div hide itself
respectively.

Javascript Fixed Navigation Bar Jumping

I've been playing around with a fixed navigation bar, but I've noticed that when it "fixes" itself, the content below all jumps up on the page.
This is the JSFiddle I've been working on, if you look closely you'll notice that when the nav bar becomes fixed to the top of the screen, the content jumps up ~1 line. I've tried playing around with the Javascript:
var win = $(window),
fxel = $('nav'),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
but I'm fairly certain the problem is in the CSS:
*{
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: white;
height: 35px;
border-bottom: solid 1px #E8E8E8;
}
nav.fixed {
position:fixed;
top: 0;
right:0px;
left:0px;
z-index:999;
height: 30px;
border-bottom: solid 1px #E8E8E8;
padding-bottom: 5px;
}
h1{
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
Any solutions on how to fix the jumping would be really helpful.
For refrence, I'm trying to get something sort of like this where the very top of the page isn't part of the navbar.
When an element is set to position: fixed, it no longer takes up space on the page, meaning it won't push other elements down on the page. So as soon as your javascript adds the fixed class, the element no longer takes up space, and so the other content jumps up to take the place where it was.
To offset this, you may need to add another rule to add something like a top margin to the next element. The top margin will need to be the height of the (now) fixed element, plus any padding and margin in the fixed element:
https://jsfiddle.net/h6g33wne/8/
nav.fixed + * {
margin-top: 35px;
}

Android Chrome fixed menu popping in and out with url disappearing

EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?

Bug with inside responsive menu

I am beginner in JS.
I found wonderful example of responsive menu, and put code inside functions.php. Menu must works like here http://filamentgroup.com/examples/rwd-nav-patterns/ but i have the bug - dropdown menu shift to the right in my site when I use tablet mode.
I tried to include this menu in my site, based on Bootstrap http://b.pusku.com
UPDATE:
Part of the problem with the fiddle was that the space allotted for the logo image was too wide, so I added the following to correct that:
#logo > img {
width: 25px;
}
To get the dropdown to float left at all times, add:
.nav-menu .nav-primary {
float: left;
clear: none;
}
to the #media screen and (min-width: 910px) rule...
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
.nav-menu .nav-primary {
float: left;
clear: none;
}
}
Once the navigation links collapse to a dropdown, they'll float left. The links will have an offset of 25px on the left because of the following rule in bootstrap.css (on line 728):
ul, ol {
padding: 0;
margin: 0 0 10px 25px; /*specifically this rule*/
}
You can override that, if you like, by adding margin-left: 0; to the .nav-primary ul rule:
.nav-primary ul {
border: 1px solid #e6e6e6;
margin-left: 0; /* add this to override the bootstrap.css rule*/
}
Finally, as the screen width narrows, the dropdown's width seems to stretch the entire width. If this is not a desired effect, add display: inline-block; to the .nav-primary rule:
.nav-primary {
clear: left;
margin: 0 0 2em;
display: inline-block;
}
I've also re-written the javascript that makes the "responsive" navigation collapse to a dropdown using more (appropriately named) variables so you may better understand why the script does what it does:
$(document).ready(function () {
'use strict';
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function () {
var nav = $(this),
navPrimaryTop = nav.offset().top, // top of div.nav-primary
navSkipNavTop = nav.prev().offset().top, // top of p containing a#main
topOfFirstLink = nav.find('li:first-child').offset().top, //top of "What We Done"
topOfLastLink = nav.find('li:last-child').offset().top, //top of "Contact Us"
navBelowSkipNav = navPrimaryTop > navSkipNavTop, //boolean indicating whether div.nav-primary is below the p containing a#main
lastLinkBelowFirstLink = topOfLastLink > topOfFirstLink, //boolean indicating whether "Contact Us" is below "What We Done"
displayAsMenu = navBelowSkipNav || lastLinkBelowFirstLink; // boolean indicating whether to collapse to a dropdown menu
$('body').removeClass('nav-menu');
if (displayAsMenu) {
$('body').addClass('nav-menu');
}
})
// toggle the menu items' visiblity
.find('h3').bind('click focus', function () {
$(this).parent().toggleClass('expanded');
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function () {
$('.nav-primary').trigger('testfit');
});
});
Here's an updated fiddle demonstrating the basics: http://jsfiddle.net/DD7MC/1/
I did not override either the margin-left or the display in the updated fiddle.
ORIGINAL:
I think it's a CSS conflict between rwd-nav.css and bootstrap.css. Try changing the class definition for .nav-menu .nav-primary h3 in rwd-nav.css to:
.nav-menu .nav-primary h3 {
position: absolute;
top: -10px; /* <-- change this line */
left: auto;
right: 0;
display: block;
width: 4em;
height: 3.75em; /* <-- change this line */
background: #ccc url(img/icons.png) no-repeat -205px 45%;
text-indent: -999em;
cursor: pointer;
font-size: inherit; /* <-- add this line */
}
Also, your hosting provider is returning a 404 for url(img/icons.png). You may want to make sure that file exists.

Categories