<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
</style>
</head>
<body>
<ul>
<li>
<div class="header">
<p>Header</p>
</div>
</li>
<li>
<div class="header">
<p>Hello World</p>
</div>
</li>
<li>
<div class="header">
<p>Footer</p>
</div>
</li>
</ul>
<script>
$(".header").on("click", function () {
var e = $(this).closest("li");
e.prev().insertAfter(e);
})
</script>
</body>
</html>
I am trying to switch the li element with animation which will be like slowly moving upwards but can't seem to make it, above is what I have practiced till now and I am weak at jquery animation hope to get your feedback/help what I want is animation like this code http://jsfiddle.net/BYossarian/GUsYQ/5/ any answer or help would be appreciated. Manga read
your CSS does not visible effect on this animation
var animating = false;
$(".header").on("click", function() {
var clickedDiv = $(this).closest("li");
if (animating) {
return;
}
prevDiv = clickedDiv.prev(),
distance = clickedDiv.outerHeight();
if (prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
top: -distance
}, 600),
prevDiv.animate({
top: distance
}, 600)).done(function () {
prevDiv.css('top', '0px');
clickedDiv.css('top', '0px');
clickedDiv.insertBefore(prevDiv);
animating = false;
});
}
});
li {
width: 200px;
border: 1px solid black;
position: relative;
margin:10px;
}
li .header {
border: 1px solid black;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="header">
<p>Header</p>
</div>
</li>
<li>
<div class="header">
<p>Hello World</p>
</div>
</li>
<li>
<div class="header">
<p>Footer</p>
</div>
</li>
</ul>
I'm trying to stick my navbar to the top of the window, After window scrolling about 50px that navbar wasn't stick anymore. could anyone solve my problem. i'm stuck. I don't have proper knowledge about javascript and materialize css
thanks in advance
<!--Style-->
<style>
.header{
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box{
height: 500px;
margin-top: 100px;
}
.sticky-nav{
position: fixed;
top: 0;
width: 100%;
}
</style>
<!--Adding JQuery Script for Sticky navbar-->
<script>
$(window).scroll(function() {
if($(this).scrollTop()>50){
$('nav').addClass('sticky-nav');
}else{
$('nav').removeClass('sticky-nav');
}
});
</script>
</head>
<body>
</div>
<!--navbar-->
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
<!--Sample Boxes -->
<div class="container">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>
It is "sticky" and works as it should :
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav').addClass('sticky-nav');
} else {
$('nav').removeClass('sticky-nav');
}
});
.header {
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box {
height: 500px;
margin-top: 100px;
}
.sticky-nav {
position: fixed;
top: 0;
width: 100%;
}
nav {
background-color: skyblue;
}
body {
height: 1000vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
Try the following please:
Change CSS to:
.sticky-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 0;
z-index: 999;
}
Change JS to:
let scrollTopY = window.pageYOffset || document.body.scrollTop;
let navigation = document.querySelector('nav');
window.addEventListener('scroll', function() {
if(scrollTopY > 50) {
navigation.classList.add('sticky-nav');
} else {
navigation.classList.remove('sticky-nav');
}
}
Feel free to accept if this works for you.
I'm taking my first steps in jquery, and I've written my first piece of code for animating picture galleries. The thing is:
I have some cover pics and the related content divs, which are hidden (height: 0;).
Each time one cover pic is clicked, the related div opens (changing the height value).
If it the related div is already opened, it closes. If another related div is opened, it closes and opens the correct div.
If the "close" button is clicked, it closes the current open div.
The code is working perfectly, but I couldn't find a syntax that can be placed just once. The way it is now, I have to repeat the script for each new "cover pic / content div" (g1/lg1 g2/lg2 g3/lg3 - in the example), specifying the selector.
How can I make it work specifying just one pair of selectors for all cover pics and related content div?
Here it goes the code: (http://jsfiddle.net/samuelleal/9PL3S/3/)
$(function () {
$('.close').click(function () {
if ($(this).parent().height() > 0) {
$(this).parent().removeClass('open').animate({
height: "0px"
}, 500);
} else {}
});
$('.lg1').click(function () {
if ($('.g1').height() > 0) {
$('.g1').removeClass('open').animate({
height: "0px"
}, 500);
} else {
$('.gallery:not(.g1)').removeClass('open').animate({
height: "0px"
}, 500, function () {
$('.g1').addClass('open').animate({
height: "80px"
}, 500);
});
}
});
$('.lg2').click(function () {
if ($('.g2').height() > 0) {
$('.g2').removeClass('open').animate({
height: "0px"
}, 500);
} else {
$('.gallery:not(.g2)').removeClass('open').animate({
height: "0px"
}, 500, function () {
$('.g2').addClass('open').animate({
height: "80px"
}, 500);
});
}
});
$('.lg3').click(function () {
if ($('.g3').height() > 0) {
$('.g3').removeClass('open').animate({
height: "0px"
}, 500);
} else {
$('.gallery:not(.g3)').removeClass('open').animate({
height: "0px"
}, 500, function () {
$('.g3').addClass('open').animate({
height: "80px"
}, 500);
});
}
});
});
HTML
<body id="body">
<div id="strip" class="f4">
<ul>
<li>
<div class="lg1 pics orange" />
</li>
<li>
<div class="lg2 pics red" />
</li>
<li>
<div class="lg3 pics green" />
</li>
</ul>
<div class="gallery g1">
<div class="close blue">close</div>
<ul>
<li>
<div class="pics orange"></div>
</li>
<li>
<div class="pics orange"></div>
</li>
<li>
<div class="pics orange"></div>
</li>
<li>
<div class="pics orange"></div>
</li>
<li>
<div class="pics orange"></div>
</li>
</ul>
</div>
<div class="gallery g2">
<div class="close blue">close</div>
<ul>
<li>
<div class="pics red"></div>
</li>
<li>
<div class="pics red"></div>
</li>
<li>
<div class="pics red"></div>
</li>
<li>
<div class="pics red"></div>
</li>
<li>
<div class="pics red"></div>
</li>
</ul>
</div>
<div class="gallery g3">
<div class="close blue">close</div>
<ul>
<li>
<div class="pics green"></div>
</li>
<li>
<div class="pics green"></div>
</li>
<li>
<div class="pics green"></div>
</li>
<li>
<div class="pics green"></div>
</li>
<li>
<div class="pics green"></div>
</li>
</ul>
</div>
</div>
CSS
.pics, li {
width: 50px;
height: 50px;
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: darkblue;
}
.red {
background-color: darkred;
}
.orange {
background-color: darkorange;
}
.close {
float: left;
height: 20px;
position: relative;
width: auto;
padding: 0 5px;
color: white;
cursor: pointer;
}
#strip > ul {
width: 100%;
height: 80px;
display: block;
}
.gallery {
height: 0;
width: 100%;
overflow: hidden;
background-color: gray;
}
ul li {
list-style: none;
}
I agree with techfoobar, that you shouldn't have multiple identical IDs on different elements, so I modified that for my answer (you could technically do it with classes, I suppose...). After changing the IDs to the classes and the classes to the IDs for the Gallery class elements (and modifying the corresponding CSS), you can give each colored square a 'gallery' attribute (to point to which gallery it opens) and attach a click event handler to all of your colored squares which looks to that gallery attribute to find which one to display:
$(document).on('click','#strip ul li div',function(){
var gallery = $(this).attr('gallery');
if ($('#'+gallery).height() > 0) {
$('#'+gallery).removeClass('open').animate({
height: "0px"
}, 500);
} else {
$('.gallery:not(#'+gallery+')').removeClass('open').animate({
height: "0px"
}, 500, function () {
$('#'+gallery).addClass('open').animate({
height: "80px"
}, 500);
});
}
});
Check it out here: http://jsfiddle.net/Qv9KR/1/
I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
HTML:
<div class="navbar navbar-fixed-top" id="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Services</li>
<li>Contact</li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
And here's my CSS:
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the HTML...
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li>Sign In</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
Here is the CSS...
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
//the below css are for the links, not needed for sticky nav
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, which I called
//banner. Just add a 1 to the last number. console.log($(window).scrollTop())
//to figure out what the scroll position is when exactly you want to fix the nav
//bar or div or whatever. I stuck in the console.log for you. Just remove when
//you know the position.
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed-top');
}
});
});
Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:
<div data-spy="affix" data-offset-top="121">
... your navbar ...
</div>
around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.
Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:
<div style="height: 77px;">
<div data-spy="affix" data-offset-top="121">
<div style="position: relative; height: 0; width: 100%;">
<div style="position: absolute; top: 0; left: 0;">
... my menu ...
</div>
</div>
</div>
</div>
where 77px is the height of my affixed component.
//in html
<nav class="navbar navbar-default" id="mainnav">
<nav>
// add in jquery
$(document).ready(function() {
var navpos = $('#mainnav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
}
});
});
Here is the jsfiddle to play around : -http://jsfiddle.net/shubhampatwa/46ovg69z/
EDIT:
if you want to apply this code only for mobile devices the you can use:
var newWindowWidth = $(window).width();
if (newWindowWidth < 481) {
//Place code inside it...
}
Bootstrap 4 - Update 2020
The Affix plugin no longer exists in Bootstrap 4, but now most browsers support position:sticky which can be used to create a sticky after scoll Navbar. Bootstrap 4 includes the sticky-top class for this...
https://codeply.com/go/oY2CyNiA7A
Bootstrap 3 - Original Answer
Here's a Bootstrap 3 example that doesn't require extra jQuery.. it uses the Affix plugin included in Bootstrap 3, but the navbar markup has changed since BS2...
<!-- Content Above Nav -->
<header class="masthead">
</header>
<!-- Begin Navbar -->
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="divider"></li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
..
</li>
<li>
..
</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
Working demo/template: http://bootply.com/69848
This worked great for me. Don't forget to put a filler div in there where the navigation bar used to be, or else the content will jump every time it's fixed/unfixed.
function setSkrollr(){
var objDistance = $navbar.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
$navbar.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
$navbar.removeClass('navbar-fixed-top');
}
});
}
Use Bootstrap Affix:
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
You could use position: sticky
#navbar {
position: sticky;
top: 0px;
}
The #navbar should be a direct child of the body though.
For Bootstrap 4, a new class was released for this. According to the utilties docs:
Apply the class sticky-top.
<div class="sticky-top">...</div>
For further navbar position options, visit here.
Also, keep in mind that position: sticky; is not supported in every browser so this may not be the best solution for you if you need to support older browsers.
In answer to Shubham Patwa: This way, the page is "jumpy" soon as the class "navbar-fixed-top" applies. That's because the #mainnav is throwen in and out of the document's DOM flow. This can result in an ugly UX if the page has a "critical height", jumping between fixed and un-fixed #mainnav position.
I altered the code this way, which seems to work fine (not pixel-perfect, but fine):
$(document).ready(function() {
var navpos = $('#mainnav').offset();
var navheight = $('#mainnav').outerHeight();
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
$('body').css('marginTop',navheight);
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
$('body').css('marginTop','0');
}
});
I have found this simple javascript snippet very useful.
$(document).ready(function()
{
var navbar = $('#navbar');
navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
var afternavbar = $('#more-div');
var abovenavbar = $('#above-navbar');
$(window).on('scroll', function()
{
if ($(window).scrollTop() > abovenavbar.height())
{
navbar.addClass('navbar-fixed-top');
afternavbar.removeClass('hidden');
}
else
{
navbar.removeClass('navbar-fixed-top');
afternavbar.addClass('hidden');
}
});
});
I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,
What else should I do to make it topmost element
<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; ">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
http://jsfiddle.net/A5jcT/2/
<div id="footer">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
#footer
{
border:1px solid blue; z-index: 9999;width: 100%;
height: 65px;position: ; bottom: 0px;
}
.container
{
border:1px solid red;position:relative;z-index: -10
}
.footer-nav
{
border:1px solid green;position:relative;z-index: -20
}
it looks like you have to make other elements also positioned. Now you have the footer on top.