I am trying to make a Navbar which changes it's image/logo, background color & font color when i scroll down a little however nothing i have tried so far has worked
Also want the image that appears when i scroll down to have the same width and height as the previous one
Here's my code
Js :
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('.navbar .navbar-brand img').attr('src','https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
}
if ($(this).scrollTop() < 1000) {
$('.navbar .navbar-brand img').attr('src','https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
}
})
});
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
As others have mentioned, you are not importing jQuery in your codepen, so the code you wrote there will not work; by including it you should see the logo changing; however the scrollTop() > 1000 is too much, maybe reduce it to like 50 and you'll see the image of the logo actually change after you scroll
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
}
if ($(this).scrollTop() < 50) {
$('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
}
})
});
$(function() {
$(document).scroll(function() {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background-color: #00695c;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
.navbar-brand.scrolled {
background-color: #fff;
transition: background-color 200ms linear;
}
<!-- Make sure to add this import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="navbar">
<div class="container">
<div id="branding" class="navbar-brand">
<img src="https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png" alt="" width="123" height="50" style="height:100%;">
</div>
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div class="space" style="height:1400px;"></div>
Are you sure you have jquery well imported, it works in my compute.
You need to import jQuery. Here is the code you need: This is their slim / min core link.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
I've been making some test, So I suggest your something like this:
$(function() {
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('header').addClass("header-alt");
} else {
header.removeClass("header-alt").addClass('header');
}
});
});
.header {
height: 200px;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
}
.header img {
background: url(https://www.w3schools.com/tags/smiley.gif) no-repeat;
}
.header-alt {
height: 100px;
background-color: rgba(0,0,0, 0.8);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
color: blue;
}
.header-alt img{
background: url(https://www.w3schools.com/html/pic_trulli.jpg) no-repeat;
}
.otherSection {
height: 2000px;
padding-top: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
<img class="img" width="42" height="42">
<h1>I'm a navigation bar<h1/>
</header>
<div class="otherSection">
Hello World
</div>
Related
< script >
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
<
/script>
<style>body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.container1 {
height: 10vh;
background-color: white;
z-index: 100;
position: absolute;
top: 0;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
z-index: 100;
}
.backgroundimage {
background-image: url("M0000-021-014_edited.jpg");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
position: relative;
}
.leftthing {
width: calc(100% - 400px);
float: left;
}
.leftthing img {
width: 100%;
}
.clear {
clear: both;
}
.show {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 10vh;
background-color: white;
}
a {
text-decoration: none;
font-family: 'Karla';
}
a:visited {
text-decoration: none;
}
/* menu*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* menu moving footer*/
#bottommenu {
position: fixed;
z-index: 100;
/* margin-left: 60px;*/
bottom: 0px;
background-color: transparent;
/* padding: 0px;*/
/* text-align: left;*/
width: 100%;
display: block;
transition: bottom 0.5s;
height: 10vh;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<div class="backgroundimage"></div>
<div class="container1">
<div class="header">
<div class="logo" onclick="scrollWin()">|bacheva
</div>
</div>
</div>
<div class="leftthing">
<img src="82213112_611171039713397_1145784978357878784_n.jpg" alt="building concept">
<img src="INTERIOR%20RENDER.jpg" alt="interior render">
<img src="exterior%20render.jpg" alt="exterior render">
<img src="big%20ground%20floor%20plan.jpg" alt="floor plan">
<img src="READY%20CLIMATE%20SCHEME.jpg" alt="climate scheme">
</div>
<div class="clear"></div>
<div class="container">
<ul style="font-family: 'Karla';font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
<div id="bottommenu">
<ul style="font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
</body>
</html>
I have the following page:
I full-screen background picture
some content with pictures when you scroll down
and a menu on the bottom right (with a height of 10vh)
I am using a javascript function that does the following: When you scroll down the menu is not shown, but when you scroll up the content, the menu appears on the bottom right. When you reach the full-screen background picture on the top the menu is set to hide again to not obstruct the picture. However, currently when you reach the top of the page, you see the menu for a millisecond before it hides again. Therefore, my question is: Can I alternate the javascript function and tell the menu to disappear 10vh before it reaches the full-size background picture so I would not see it before it disappears when I reach the top of the page.
Here is the function I am using:
<script>
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
</script>
Looking at the last 'if' the menu disappears when the current scroll is '0', but I would rather have it disappear before it reaches this last possible scroll (before it reaches the full-screen background picture.)
Thank you in advance for your help.
I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.
The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.
SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});
You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
I got have confusing problem with jquery / css. I'm trying to get my navbar link color to change from white to black, and back again when 'entering' into a new nth-child.
So when going over nth-child(3n+1) and (3n+2), the links need to be white, but (3n+3), the links need to go black, and change back at the next cycle.
I've tried to reuse a script for adding classes, but it just keeps adding .white and .black until I go back to the top.
How would I solve this?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+1)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+2)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+3)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("black");
} else {
$(".navbar a").removeClass("black");
}
});
html {
height: 100%;
font-size: 21px;
}
body {
margin: 0px;
font-family: 'Karla', sans-serif;
width: 100%;
height: 100%;
color: white;
}
* {
box-sizing: border-box;
}
/* DESIGN */
.row::after {
content: "";
clear: both;
display: table;
}
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
padding-right: 20vw;
padding-left: 20vw;
}
[class*="col-"] {
float: left;
height: 90vh;
padding-right: 20vw;
padding-left: 20vw;
padding-top: 25vh;
padding-bottom: 15vh;
background-attachment: scroll;
}
[class*="col-"]:nth-child(3n+1) {
/* The image used */
background-image: url("img/bg2.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
[class*="col-"]:nth-child(3n+2) {
background-color: rgb(238, 114, 3);
}
[class*="col-"]:nth-child(3n+3) {
background-color: white;
color: black;
}
.black {
color: black !important;
}
.white {
color: white !important;
}
/* NAVIGATION */
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
/* Set the navbar to fixed position */
top: 5;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
font-size: 25px;
font-weight: bold;
line-height: 1.5em;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
background-color: transparent;
text-align: center;
margin: 20px;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
}
.navbar a:hover {
border-bottom: 1px solid;
}
#media screen and (max-width: 1180px) {
.navbar a {
font-size: 16px;
padding-left: 0px;
padding-right: 0px;
}
}
#media screen and (max-width: 700px) {
.navbar a {
display: none !important;
}
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="thumbnail">
<img class="thumbnail" src="img/RF thumbnail.png">
</div>
<div class="navbar" id="myTopnav">
Contact
Adverts
About us
What is this
<a class="signup" href="#welcome">Sign up</a>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-chevron-up"></i></button>
<!-- CONTENT -->
<div class="row">
<div class="col-4" id="welcome">
</div>
<div class="col-4" id="whatisthis">
<h1>What is this?</h1>
</div>
<div class="col-4" id="adverts">
<h1>Adverts</h1>
</div>
<div class="col-4" id="about">
<h1>About</h1>
</div>
<div class="col-4" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
When u scroll down u dont remove a class. You are only adding it.
And the last class is what have the control of the color.
So. You are adding black, then white. After that adding black again will do nothing. There is still
class="black white"
Remove the last class after each section should fix your problem.
And jQuery has also hasClass(className)
how to find the element which are on screen during scroll jquery.
Currently , I am using stick navbar with scroll.When we scroll down or up automatically the link in the navbar should be enabled.
I tried http://codetheory.in/change-active-state-links-sticky-navigation-scroll/ and able to succeed.
One problem is the link getting enabled when it reached the top of the screen. But I need the link to be enabled when the element is reached the center of the screen.
Thanks in advance.
Just add a half of the window height to the current position:
var cur_pos = $(this).scrollTop() + $(window).height() / 2;
And subtract it when you click on a link:
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height - $(window).height() / 2
}, 500);
Try this snippet (better open it in full-screen):
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop() + $(window).height() / 2;
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height - $(window).height() / 2
}, 500);
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/* Navigation */
nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #1ABC9C;
}
nav ul {
padding: 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
padding: 10px 0;
color: #fff;
font-size: 1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #34495E;
}
a.active {
border-bottom: 2px solid #ecf0f1;
}
/* Headings */
h1 {
font-size: 5rem;
color: #34495E;
}
/* Sections */
section {
width: 100%;
padding: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
height: 500px;
text-align: center;
}
section:nth-child(even) {
background: #ecf0f1;
}
section:nth-child(odd) {
background: #bdc3c7;
}
.sections section:first-child {
margin-top: 60px;
}
section.active {}
footer {
height: 500px;
background: #34495e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
Can you please try following code:
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight()
, win_height = $(window).height();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (bottom >= (win_height / 2 + cur_pos) ) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
return false;
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/* Navigation */
nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #1ABC9C;
}
nav ul {
padding: 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
padding: 10px 0;
color: #fff;
font-size: 1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #34495E;
}
a.active {
border-bottom: 2px solid #ecf0f1;
}
/* Headings */
h1 {
font-size: 5rem;
color: #34495E;
}
/* Sections */
section {
width: 100%;
padding: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
height: 500px;
text-align: center;
}
section:nth-child(even) {
background: #ecf0f1;
}
section:nth-child(odd) {
background: #bdc3c7;
}
.sections section:first-child {
margin-top: 60px;
}
section.active {}
footer {
height: 500px;
background: #34495e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Hope, it helps :)
I have made a fiddle here
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
//show phone triggering at height 150px from 1st DIV
$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("#first").height();
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
if($(window).scrollTop() >= triggerHeight) {
$('.phone').css('visibility', 'visible').hide().fadeIn();
$(this).off('scroll');
}
});
#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: block;
visibility: hidden;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="nav">
<ul id="navlist">
<li>Home</li>
<li>Features</li>
<li>About Us</li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"> </div>
</section>
<section>
<div class="main" id="third"></div>
</section>
There you can see that when I scroll down the phone is shown triggering at height 150px. That is what I want so okay till here. But when I scroll back up to the 1st div it should fade out and hide. I tried to do it but failed. I want to make it in a way that its not shown in 1st and last div (it should only be shown in the middle div's). Say for example I have five sections there of divisions. It should start showing as it is now and should be visible till 4th div. Once 5th div comes into viewport it should fadeout and hide. And similarly when I scroll back to the 1st div it should fade out and hide again and repeat the process on scroll up and scroll down.
Please help me devs.
In code after showing the phone you are using this $(this).off('scroll') this unbinding the scroll
This may help you
$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("#first").height();
var viewPortSize = $(window).height();
var lastDivHeight = $("#third").height()+viewPortSize;
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
console.log(lastDivHeight);
if($(window).scrollTop() >= triggerHeight && $(window).scrollTop() <= lastDivHeight) {
$('.phone').css('visibility', 'visible').fadeIn();
}
else{
$('.phone').css('visibility', 'hidden').fadeOut();
}
});
You can use an else statement to hide it if it dont match the if
if ($(window).scrollTop() >= triggerHeight) {
$('.phone').css('visibility', 'visible').show().fadeIn();
} else {
$('.phone').css('visibility', 'hidden').fadeOut();
}
Also remove $(this).off('scroll'); then it should work
NOTE I've also changed your .phone class a bit
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: none; // <--- changed
//visibility : hidden // <--- removed
}
Update update with answer to your question about last div
var DivTop = $("#fifth").position().top;
if ($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop)
Working example.
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
return false; /* Exit $.each loop */
};
});
});
var mainTops = [];
$('.main').each(function() {
mainTops.push($(this).position().top)
});
//show phone triggering at height 150px from 1st DIV
$(window).scroll(function() {
var topDivHeight = $("#first").height();
var DivTop = $("#fifth").position().top;
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
if (n <= $(window).scrollTop())
{
count++;
}
});
$('.nav ul li a').css("color", "#000");
$('.nav ul li a#nav'+count ).css("color", "#fff");
if ($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop) {
$('.phone').css('visibility', 'visible').show().fadeIn();
} else {
$('.phone').css('visibility', 'hidden').fadeOut();
}
});
*{
margin:0;
padding:0}
#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li:first-of-type a{
color: #fff;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: none;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="nav">
<ul id="navlist">
<li>Home
</li>
<li>Features
</li>
<li>About Us
</li>
<li>fourth
</li>
<li>fifth
</li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"></div>
</section>
<section>
<div class="main" id="third"></div>
</section>
<section>
<div class="main" id="fourth"></div>
</section>
<section>
<div class="main" id="fifth"></div>
</section>
Updated code to solve color change on entering new section:
var mainTops = [];
$('.main').each(function() {
mainTops.push($(this).position().top)
});
var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
if (n < $(window).scrollTop())
{
count++;
}
});
$('.nav ul li a').css("color", "#000");
$('.nav ul li a#nav'+count ).css("color", "#fff");