I'm trying to accomplish a simple effect of sticking the menu to top of the browser window when scrolling passes a certain point, but something went wrong and the menu wont get fixed to the top. From the libraries I'm using jQuery and animate it.
My code is as follows:
HTML:
<nav class="animatedParent">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>
CSS:
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
width: 400px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 35px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
JS (jQuery):
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
});
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
});
var nav = $("nav").offsetTop();
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
console.log('Hello!');
} else {
$("nav").removeClass("fixedNav");
}
});
So first off, you only use the code once, which is when the document is loaded. You're going to want to check everytime you scroll the document as the code should obivously be triggered once you scroll a certain amount.
$(document).scroll(function(){
var nav = $("nav").height();
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
} else {
$("nav").removeClass("fixedNav");
}
});
body {
background: black;
height:700px;
}
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
display: block;
height: 100px;
width: 100%;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 35px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent nav">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>
You need to use the event scroll and check the offset there.
When the user is scrolling, toggleClass will add/remove the class based on the condition $window.scrollTop() > navOffset which will return true or false
var $window = $(window);
var $nav = $('nav');
var navOffset = $nav.offsetTop();
$window.on('scroll', function() {
$nav.toggleClass('fixedNav', $window.scrollTop() > navOffset);
});
add an scroll event to check your scroll position
for example:
$(document).scroll(()=>{...});
like here
This is a very plain demo, it only demonstrate wha i meant
You can use a library like scrollMonitor to accomplish your task as scroll monitoring have its own caveats.
You can let scrollMonitor to lock position of your menu when it leaves viewport, something like this:
var $menu = document.querySelector('nav'); // It is better to use CSS class name instead
var watcher = scrollMonitor.create($menu);
watcher.lock();
watcher.exitViewport(function() {
$menu.classList.add('fixedNav');
});
watcher.enterViewport(function() {
$menu.classList.remove('fixedNav');
});
Please refer this example as it closely matches your task.
You don't fire the check for the current scroll on scroll event. That's an event you're looking for.
Also you could check the scrollTop on the document (it's more error proof in jQuery), not on the window as it doesn't always work.
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
});
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
});
$(document).on('scroll', function() {
var nav = $("nav").offsetTop();
if($(document).scrollTop() > nav) {
$("nav").addClass("fixedNav");
console.log('Hello!');
} else {
$("nav").removeClass("fixedNav");
}
})
});
That is what you are looking for:
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
}) ;
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
}) ;
});
$(document).ready(fixedHeader) ;
$(window).scroll(fixedHeader) ;
function fixedHeader() {
var nav = parseInt($("nav").css("margin-top")) ;
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
}
else {
$("nav").removeClass("fixedNav");
}
}
body{
height: 1000px;
}
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
width: 400px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 20px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>
I have a website with expanding circles and text on top of that. The website was working fine, till I added the jquery fullpage.js plugin. Now, the expanding circles come on top of the text and covers it up entirely. I have tried giving the text a higher z-index and tried it both with absolute and relative positioning, but nothing seems to work. Can anyone help me out with this?
link to website: https://rimildeyjsr.github.io/spotify-circle-animation/
HTML:
<div id="fullpage">
<div class="section active" id="section1">
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li >Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="main-heading">
<span id="main-heading"></span>
</div>
<span id="welcome-msg">Welcome to my website</span>
</div>
<div class="section">
</div>
</div>
CSS:
.initial-div {
width: 1000px;
height: 1000px;
transform: scale(0);
}
.position-div{
position: absolute;
border-radius: 50%;
display: none;
}
.animate {
-webkit-animation: expand 2500s;
}
#-webkit-keyframes expand {
0%{
-webkit-transform: scale(0,0);
}
100%{
-webkit-transform: scale(100.0,100.0);
display: none;
}
}
.main-heading{
text-align:left;
z-index: 20;
position: relative;
display: block;
height:228px;
width:644px;
font-family: Graphik, Roboto;
font-size: 10em;
font-weight: 600;
letter-spacing: 0.2px;
color: #ffffff;
top: 23%;
left: 8%;
}
#welcome-msg {
display: block;
z-index: 20;
position: relative;
text-align: left;
font-size: 4em;
font-family: Graphik,Roboto;
color: #ffffff;
height: 198px;
width: 1138px;
font-weight: 600;
top: 24%;
left: 8%;
}
Jquery:
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
function makeDiv(color){
var divsize = 1000;
//$('body').css({'background-color':bgColor});
console.log(1);
$newdiv = $('<div/>').addClass('initial-div').css({
'background-color': color
});
var posx = (Math.random() * ($(document).width()) - (divsize / 2)).toFixed();
var posy = (Math.random() * ($(document).height()) - (divsize / 2)).toFixed();
$newdiv.addClass('position-div').css({
'left':posx+'px',
'top':posy+'px'
}).appendTo( 'body' ).addClass('animate').css({'display':'block'}).one(animationEnd,function(){
$(this).remove();
});
}
$(document).ready(function(){
$('#fullpage').fullpage({
anchors: ['home'],
fixedElements: '#toggle,#overlay'
});
$("#main-heading").delay(2000).css("visibility","visible").typed({
strings:["^1000Hello,","Bonjour,","Hola,","nuqneH,","Ola,","Hallo,","سلام"
,"Ciao,"],
typeSpeed: 300,
loop: true,
showCursor: true,
cursorChar: "|",
preStringTyped: function(){
$(".main-heading").css("visibility","visible");
},
onStringTyped: function(){
$('.button-launch').addClass("animated slideInDown").css("visibility","visible")
;
}
});
$('#toggle').click(function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
$('#overlay ul li a').click(function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
//var arrayLength = colorArray.length;
var colorArray = ['#11256c','#24ccdf'];
var i= 0,flag=0;
var color = colorArray[i];
setInterval(function(){
flag++;
makeDiv(color);
if (flag == 15){
color = colorArray[i];
i++;
if (i == 2) {
i = 0;
}
flag=0;
}
},2000);
});
Link to github repository: https://github.com/rimildeyjsr/spotify-circle-animation
hello add this css in your file for remove applied CSS transformation and its work
#fullpage {
-webkit-transform: none !important;
transform: none !important;
}
In your case try this
#fullpage {
z-index: 2;
}
On my website I have set up a "click-to-scroll" menu with the logic of:
1. when menu link is clicked, scroll to corresponding anchor and add active class to $(this)
2. onscroll, toggle active class according to the current anchor's location
This all works fine, but there is a small bug in that when you click a link, the page flickers slightly and so do the active menu links. You can see and test it live at http://jcwd98.appspot.com/ (warning that it's in its early development stages, no mobile and probably looks pretty crappy right now).
I'm not sure what causes the page to flicker, but I do know that the reason the menu links flicker is because my code is telling it to add an active class to it when it scrolls over its corresponding section. Since the document has to first scroll over a section to get to the desired section, it adds an active class to other links before it arrives.
I don't want either of these scenarios.
jsFiddle
Code:
var section_padding = 45;
$("#menu ul li a").on("click", function(event) {
event.preventDefault;
$("#menu ul li a.active").removeClass("active");
$(this).addClass("active");
var target = this.hash;
var menu = target;
var cache_target = $(target);
var buffer = (cache_target.offset().top - section_padding);
$("html, body").stop().animate({
"scrollTop": buffer
}, 400, "swing");
});
function scroll(event) {
var scroll_pos = $(document).scrollTop();
$("#menu ul li a").each(function() {
var cur_link = $(this);
var ref_el = $(cur_link.attr("href"));
if( ref_el.position().top <= scroll_pos && ref_el.position().top + ref_el.height() + (section_padding * 2) > scroll_pos ) {
$("#menu ul li a").removeClass("active");
cur_link.addClass("active");
} else {
cur_link.removeClass("active");
}
});
}
$(document).on("scroll", scroll);
* {
margin: 0;
padding: 0;
}
#menu {
display: block;
height: 50px;
width: 100%;
position: fixed;
z-index: 100;
background: rgba(255, 255, 255, .8);
}
#menu ul {
display: block;
width: 100%;
height: 100%;
list-style: none;
}
#menu ul li {
display: block;
box-sizing: border-box;
height: 100%;
width: calc(100% / 5);
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
float: left;
text-align: center;
line-height: 50px;
}
#menu ul li a {
display: block;
text-decoration: none;
font-family: arial;
}
#menu ul li a:hover,
#menu ul li a.active {
background: #f0f0f0;
}
#sections {
display: block;
position: relative;
top: 50px;
}
section {
display: block;
height: 500px;
width: 100%;
background: #67D182;
padding: 45px 50px;
box-sizing: border-box;
}
#sections section:nth-child(even) {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Top</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div id="sections">
<section id="top">
<h2>#top</h2>
</section>
<section id="about">
<h2>#about</h2>
</section>
<section id="portfolio">
<h2>#portfolio</h2>
</section>
<section id="contact">
<h2>#contact</h2>
</section>
<section id="blog">
<h2>#blog</h2>
</section>
</div>
Any help would be greatly appreciated. :)
This happen because preventDefault is a function, then you only need to change:
event.preventDefault;
To:
event.preventDefault();
And this work fine.
FIDDLE: https://jsfiddle.net/lmgonzalves/ve5qr3bL/2/
EDIT:
You need to unbind the scroll event, and then bind it again when the animation be completed.
$("#menu ul li a").on("click", function(event) {
event.preventDefault();
$(document).off("scroll"); // here unbind
// code
$("html, body").stop().animate({
"scrollTop": buffer
}, 400, "swing", function() {
$(document).on("scroll", scroll); // here bind again
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/ve5qr3bL/3/
How can I set the navbar with no background color?
When scrolling down after a div the nav-bar gets a new background-color (the nav-bar should be fixed at top, I use navbar-fixed-top in Bootstrap)
I've tried some tutorials but I didn't succeed.
This is the website : http://attafothman.olympe.in/
I'm talking about that black nav-bar on top.
Here is simplest way how to change navbar color after window scroll:
Add follow JS to head:
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
and this CSS code
.navbar-fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
Background color of fixed navbar will be change to white when scroll exceeds height of navbar.
See follow JsFiddle
this is a simple pure javascript
var myNav = document.getElementById('mynav');
window.onscroll = function () {
if (document.body.scrollTop >= 200 ) {
myNav.classList.add("nav-colored");
myNav.classList.remove("nav-transparent");
}
else {
myNav.classList.add("nav-transparent");
myNav.classList.remove("nav-colored");
}
};
in some chrome versions there is a bug with:
document.body.scrollTop
so you may add a condition like this:
if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 )
sure you must have 2 classes
.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}
Here is a jsfiddle example. Using Jquery to change the background color based on scroll pixel position.
Here is a fiddle using bootstrap
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
i think this solution is shorter and simpler than older answers.
This is Js Code:
const navbar = document.querySelector('.nav-fixed');
window.onscroll = () => {
if (window.scrollY > 300) {
navbar.classList.add('nav-active');
} else {
navbar.classList.remove('nav-active');
}
};
And my css:
header.nav-fixed {
width: 100%;
position: fixed;
transition: 0.3s ease-in-out;
}
.nav-active {
background-color:#fff;
box-shadow: 5px -1px 12px -5px grey;
}
Today I've gone through the same question, how to change navbar background-color as scrolling. And I was seeking for a solution using CSS only, no jquery, no bootstrap nor javascript. But then it turned out couldn't be done with CSS only yet (as of today Dec 2019). And have to choose, I'll stick with the core technology - javascript instead of jquery or bootstrap unless it's far more complicated using js than the others. But luckily it's not.
Here's the code:
- It uses onscroll/ scroll event of window to trigger the event listener.
- In the event listener, use pageYOffset/ scrollY of window to check the scroll status.
Browser support are seemingly the same between both:
- https://caniuse.com/#search=pageYOffset
- https://caniuse.com/#search=scrollY
var navbar = document.querySelector('nav')
window.onscroll = function() {
// pageYOffset or scrollY
if (window.pageYOffset > 0) {
navbar.classList.add('scrolled')
} else {
navbar.classList.remove('scrolled')
}
}
body {
margin: 0;
padding: 0;
background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;
}
nav {
position: -webkit-sticky;
position: sticky;
/* sticky or fixed are fine */
position: fixed;
top: 0;
height: 69px;
width: 100%;
background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */
transition: background .5s; /* control how smooth the background changes */
}
nav.scrolled {
background: #0a0a0a;
}
main {
height: 200vh;
}
<nav></nav>
<main></main>
<script>
$(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
$(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
</script>
This can be done using jQuery.
Here is a link to a fiddle.
When the window scrolls, the distance between the top of the window and the height of the window is compared. When the if statement is true, the background color is set to transparent. And when you scroll back to the top the color comes back to white.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".menu").css({"background-color":"transparent"});
}
else{
$(".menu").css({"background-color":"white"});
}
})
})
window.addEventListener('scroll', function (e) {
var nav = document.getElementById('nav');
if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
nav.classList.add('nav-colored');
nav.classList.remove('nav-transparent');
} else {
nav.classList.add('nav-transparent');
nav.classList.remove('nav-colored');
}
});
best approach to use event listener. especially for Firefox browser, check this doc Scroll-linked effects and Firefox is no longer support document.body.scrollTop and alternative to use document.documentElement.scrollTop. This is completes the answer from Yahya Essam
How about the Intersection Observer API? This avoids the potential sluggishness from using the scroll event.
HTML
<nav class="navbar-fixed-top">Navbar</nav>
<main>
<div class="content">Some content</div>
</main>
CSS
.navbar-fixed-top--scrolled changes the nav bar background color. It's added to the nav bar when the content div is no longer 100% visible as we scroll down.
.navbar-fixed-top {
position: sticky;
top: 0;
height: 60px;
}
.navbar-fixed-top--scrolled {
/* change background-color to whatever you want */
background-color: grey;
}
JS
Create the observer to determine when the content div fully intersects with the browser viewport.
The callback function is called:
the first time the observer is initially asked to watch the target element
when content div is no longer fully visible (due to threshold: 1)
when content div becomes fully visible (due to threshold: 1)
isIntersecting indicates whether the content div (the target element) is fully intersecting with the observer's root (the browser viewport by default).
// callback function to be run whenever threshold is crossed in one direction or the other
const callback = (entries, observer) => {
const entry = entries[0];
// toggle class depending on if content div intersects with viewport
const navBar = document.querySelector('.navbar-fixed-top');
navBar.classList.toggle('navbar-fixed-top--scrolled', !entry.isIntersecting);
}
// options controls circumstances under which the observer's callback is invoked
const options = {
// no root provided - by default browser viewport used to check target visibility
// only detect if target element is fully visible or not
threshold: [1]
};
const io = new IntersectionObserver(callback, options);
// observe content div
const target = document.querySelector('.content');
io.observe(target);
IntersectionObserver options
The nav bar currently changes background color when the content div starts moving off the screen.
If we want the background to change as soon as the user scrolls, we can use the rootMargin property (top, right, bottom, left) and set the top margin to negative the height of the nav bar (60px in our case).
const options = {
rootMargin: "-60px 0px 0px 0px",
threshold: [1]
};
You can see all the above in action on CodePen. Kevin Powell also has a good explanation on this (Github & YouTube).
Slight variation to the above answers, but with Vanilla JS:
var nav = document.querySelector('nav'); // Identify target
window.addEventListener('scroll', function(event) { // To listen for event
event.preventDefault();
if (window.scrollY <= 150) { // Just an example
nav.style.backgroundColor = '#000'; // or default color
} else {
nav.style.backgroundColor = 'transparent';
}
});
So I'm using querySelector to get the navbar
I added a scroll event to the window to track the scrollY property
I check if it's higher than 50 then I add the active class to the navbar, else if it contains it already, I simply remove it and I'm pretty sure the conditions can be more currated and simplified.
I made this codepen to help you out!
const navbar = document.querySelector('#nav')
window.addEventListener('scroll', function(e) {
const lastPosition = window.scrollY
if (lastPosition > 50 ) {
navbar.classList.add('active')
} else if (navbar.classList.contains('active')) {
navbar.classList.remove('active')
} else {
navbar.classList.remove('active')
}
})
I use WordPress which comes with Underscore. So when you register your theme scripts, you would use 'jquery' and 'underscore' as the handle for the array of the dependancies. If you are not using WordPress, then make sure that you load both the jQuery framework and Underscore before your scripts.
CodePen: https://codepen.io/carasmo/pen/ZmQQYy
To make this demo (remember it requires both jQuery and Underscore).
HTML:
<header class="site-header">
<div class="logo">
</div>
<nav>navigation</nav>
</header>
<article>
Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling
</article>
CSS:
body,
html {
margin: 0;
padding: 0;
font: 100%/180% sans-serif;
background: #eee;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
article {
height: 2000px;
padding: 5%;
background: #fff;
margin: 2% auto;
max-width: 900px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
}
.site-header {
background: #fff;
padding: 20px 5%;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.23);
transition: all .5s ease-in-out;
-web-kit-position: sticky;
position: sticky;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo {
background-image: url('the-path-to-the-logo.svg');
background-repeat: no-repeat;
background-position: center center;
width: 200px;
height: 60px;
background-size: contain;
transition: width .5s ease-in-out, height .5s ease-in-out;
}
.site-header nav {
text-align: right;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
}
.site-header.is-scrolling {
opacity: .8;
background: tomato;
padding: 10px 5%;
}
.site-header.is-scrolling .logo {
height: 40px;
width: 100px;
}
jQuery:
( function( window, $, undefined ) {
'use strict';
////////////// Begin jQuery and grab the $ ////////////////////////////////////////
$(document).ready(function() {
function is_scrolling() {
var $element = $('.site-header'),
$nav_height = $element.outerHeight( true );
if ($(this).scrollTop() >= $nav_height ) { //if scrolling is equal to or greater than the nav height add a class
$element.addClass( 'is-scrolling');
} else { //is back at the top again, remove the class
$element.removeClass( 'is-scrolling');
}
}//end is_scrolling();
$(window).scroll(_.throttle(is_scrolling, 200));
}); //* end ready
})(this, jQuery);
I've recently done it slightly different to some of the examples above so thought I'd share, albeit very late!
Firstly the HTML, note there is only one class within the header:
<body>
<header class="GreyHeader">
</header>
</body>
And the CSS:
body {
height: 3000px;
}
.GreyHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.FireBrickRed {
height: 100px;
background-color: #b22222;
position: fixed;
top:200;
width: 100%;
}
.transition {
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
The html uses only the class .greyHeader but within the CSS I have created another class to call once the scroll has reached a certain point from the top:
$(function() {
var header = $(".GreyHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('GreyHeader').addClass("FireBrickRed ");
header.addClass("transition");
} else {
header.removeClass("FireBrickRed ").addClass('GreyHeader');
header.addClass("transition");
}
});
});
check this fiddle: https://jsfiddle.net/29y64L7d/1/
First things first, you have to include Jquery into your HTML file or whatever file you are using.
create a script code space in the head part of your file and include the code below.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$(".navbar").css({"background-color":"black"});
}
else{
$(".navbar").css({"background-color":""});
}
})
})
With this where the code says ($(window).scrollTop() > 100) 100 is in "px" so you can specify the height at which the function is called.
This line of code $(".navbar").css({"background-color":"black"}); is where you replace your class name of the Nav element. This is just directly accessing the CSS and then editing the CSS.
HTML Code Below
<header class="hero">
<nav class="navbar ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="" alt=""> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TV shows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News and Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My List</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() >1290 ) {
$(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)");
}else if ($(document).scrollTop() >850) {
$(".navbar-fixed-top").css("background-color", "black");
}else if ($(document).scrollTop() >350) {
$(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)");
}
else {
$(".navbar-fixed-top").css("background-color", "red");
}
});
});
#import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans);
body {
font-family: "Roboto Slab", sans-serif;
position: relative;
}
h1,
h2,
h3,
h4 {
font-family: "Open Sans", sans-serif;
}
.main {
padding-top: 50px;
}
#home {
padding-top: 20%;
background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s31.postimg.org/l5q32ptln/coffee_cup_mug_apple.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
position: relative;
height: 100vh;
}
#home h2 {
color: white;
font-size: 4em;
}
#home h4 {
color: white;
font-size: 2em;
}
#home ul {
list-style-type: none;
text-align: center;
}
#home li {
padding-bottom: 12px;
padding-right: 12px;
display: inline;
}
#home li:last-child {
padding: 0;
}
#media (max-width: 710px) {
#home li {
display: block;
}
}
.img-style {
height: 200px;
width: 200px;
margin-top: 50px;
}
#about {
height: 100vh;
padding-top: 10%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s32.postimg.org/sm6o6617p/photo_1432821596592_e2c18b78144f.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
position: relative;
color: white;
}
#about p,
li {
font-size: 17px;
}
.navbar.color-yellow {
background-color: yellow;
height: 50px;
color: yellow;
}
.navbar.color-change {
background-color: #f45b69;
height: 50px;
color: rgba(255, 254, 255, 0.8);
}
#portfolio {
padding-top: 30px;
rgba(226,
226,
226,
1);
background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 25%, rgba(219, 219, 219, 1) 57%, rgba(254, 254, 254, 1) 100%);
height: 100vh;
}
#portfolio .block .portfolio-contant ul li {
float: left;
width: 32.22%;
overflow: hidden;
margin: 6px;
position: relative;
}
#portfolio .block .portfolio-contant ul li:hover .overly {
opacity: 1;
}
#portfolio .block .portfolio-contant ul li:hover .position-center {
position: absolute;
top: 50%;
-webkit-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
#portfolio .block .portfolio-contant ul li a {
display: block;
color: #fff;
}
#portfolio .block .portfolio-contant ul li a h2 {
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
}
#portfolio .block .portfolio-contant ul li a p {
font-size: 15px;
}
#portfolio .block .portfolio-contant ul li a span {
font-style: italic;
font-size: 13px;
color: #655E7A;
}
#portfolio .block .portfolio-contant ul img {
width: 100%;
height: auto;
}
#portfolio .block .portfolio-contant .overly {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
-webkit-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
text-align: center;
}
#portfolio .block .portfolio-contant .position-center {
position: absolute;
top: 50%;
left: 10%;
-webkit-transform: translate(0%, 50%);
-moz-transform: translate(0%, 50%);
-ms-transform: translate(0%, 50%);
transform: translate(0%, 50%);
-webkit-transition: .5s all;
-o-transition: .5s all;
transition: .5s all;
}
#contact {
height: 100vh;
padding-top: 10%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s32.postimg.org/ex6q1qxkl/pexels_photo.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
#contact h3 {
color: white;
}
footer ul {
list-style-type: none;
text-align: center;
}
footer li {
display: inline;
padding-right: 10px;
}
footer li:last-child {
padding: 0;
}
footer p {
color: grey;
font-size: 11px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured">Portfolio</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!-- collapse navbar-collapse -->
</div>
<!-- container -->
</nav>
</header>
<div class="main">
<div class="row " id="home" data-speed="2" data-type="background">
<div class="container">
<h2 class="text-center">Welcome to my portfolio</h2>
<h4 class="text-center">Where awesomeness is crafted</h4>
<hr>
<ul>
<li><i class="fa fa-github"></i> GitHub</li>
<li><i class="fa fa-linkedin"></i> LinkedIn</li>
<li><i class="fa fa-fire"></i> FreeCodeCamp</li>
</ul>
</div>
<!--container-->
</div>
<!--home-->
<div class="row" id="about" data-speed="2" data-type="background">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2>About me</h2>
<p>Courteous and Enthusiastic,I'm interested in IT and around in its globe. I began to be fascinated by web programming i.e, building websites and developing cross-platform apps.I'm always looking for new ventures where i can learn evolve and
expertise.
</marquee>
</div>
</p>
<p>My skills are:
<ul>
<li> Front-end : HTML5, CSS3 , jQuery, Bootstrap, AngularJS</li>
<li>Back-end: Ruby on Rails</li>
<li>Methodology: Agile, TDD</li>
</ul>
</p>
</div>
<!--col-md-5-->
<div class="col-md-4 col-md-offset-1">
<img class="img-circle img-style hidden-xs" src="https://www.triketech.site/images/log.png" />
</div>
</div>
<!--row-->
</div>
<!--container-->
</div>
<!--about-->
<div class="row" id="portfolio" data-speed="2" data-type="background">
<div class="container">
<h2 class="text-center">Portfolio projects</h2>
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="portfolio-contant">
<ul id="portfolio-contant-active">
<li class="mix Branding">
<a href="#">
<img src="#" alt="">
<div class="overly">
<div class="position-center">
<h2>Local Support</h2>
</div>
</div>
<!--overly-->
</a>
</li>
</ul>
</div>
<!--portfolio-contant-->
</div>
<!--block-->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--container-->
</div>
<!--portfolio-->
<div class="row" id="contact" data-speed="2" data-type="background">
<div class="container">
<div class="col-md-4 col-md-offset-1">
<h3>Contact me at:</h3>
<h3>thegreatvamshi#triketech.com</h3>
</div>
<!--col-md-4-->
</div>
<!--container-->
</div>
<!--contact-->
</div>
<!--main-->
<footer>
<ul>
<li>Home </li>
<li>About </li>
<li>Portfolio </li>
<li>Contact </li>
</ul>
<p class="text-center">Copyright © - All Rights Reserved. </p>
</footer>
</body>
</html>
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() >1920 ) {
$(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)");
} else if ($(document).scrollTop() >1580) {
$(".navbar-fixed-top").css("background-color", "black");
} else if ($(document).scrollTop() >620) {
$(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)");
} else {
$(".navbar-fixed-top").css("background-color", "transparent");
}
});
});
</script>
First you make an id named nav (can change whatever you want) inside the nav div (exp: id="nav")
Then at the bottom where body tag had been finished. You add this code
<script>
$(document).ready(function()
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll>50){
$("#nav").css("background", "#555");
}
else {
$("#nav").css("background", "transparent");
}
})
})
</script>
$(window).on('activate.bs.scrollspy', function (e,obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('nav_white');
var isBGDark = $(obj.relatedTarget).hasClass('nav_blue');
$('.menu').removeClass('nav_white');
$('.menu').removeClass('nav_blue');
if(isBGDark)
{
$('.menu').addClass('nav_white');
}else if(isBGLight)
{
$('.menu').addClass('nav_blue');
}
/*var isScrolled = $(document).scrollTop() > 1;
$('.menu').toggleClass('scrolled', isScrolled);
$(".demos").toggleClass("demo");
$(".demos").toggleClass("demo1");
var posicionActual = $(document).scrollTop();
$.each($('.nav_transparent'),function(){
if ($(this).position().top < posicionActual){
$("nav.menu").removeClass("nav_white");
$("nav.menu").removeClass("nav_blue");
$("nav.menu").addClass("nav_transparent");
$(".demos").removeClass("demo");
$(".demos").addClass("demo1");
$(".cls").removeClass("cls2");
$(".cls").addClass("cls1");
$(".cl").removeClass("cl2");
$(".cl").addClass("cl1");
$(".hamb-bottom").css({"background-color": "#fff"});
$(".hamb-middle").css({"background-color": "#fff"});
$(".hamb-top").css({"background-color": "#fff"});
}
});
$.each($('.nav_blue'),function(){
if ($(this).position().top <= posicionActual){
$("nav.menu").removeClass("nav_transparent");
$("nav.menu").removeClass("nav_white");
$("nav.menu").addClass("nav_blue");
$(".demos").removeClass("demo1");
$(".demos").addClass("demo");
$(".cls").removeClass("cls2");
$(".cls").addClass("cls1");
$(".cl").removeClass("cl2");
$(".cl").addClass("cl1");
$(".hamb-bottom").css({"background-color": "#fff"});
$(".hamb-middle").css({"background-color": "#fff"});
$(".hamb-top").css({"background-color": "#fff"});
}
});
$.each($('.nav_white'),function(){
if ($(this).position().top <= posicionActual){
$("nav.menu").removeClass("nav_blue");
$("nav.menu").removeClass("nav_transparent");
$("nav.menu").addClass("nav_white");
$(".demos").removeClass("demo");
$(".demos").addClass("demo1");
$(".cls").removeClass("cls1");
$(".cls").addClass("cls2");
$(".cl").removeClass("cl1");
$(".cl").addClass("cl2");
$(".hamb-bottom").css({"background-color": "#4285f4"});
$(".hamb-middle").css({"background-color": "#4285f4"});
$(".hamb-top").css({"background-color": "#4285f4"});
}
});*/
});
$(window).on("scroll", function(){
if($(document).scrollTop() < 10)
{
$('.nav').removeClass('nav_white');
$('.nav').removeClass('nav_blue');
$('.nav').removeClass('nav_transparent');
$('.nav').addClass('nav_transparent');
}
});
the solutions, maybe