I'm currently using bootstrap's navbar with built-in scrollspy function in an one page layout. (like in this example: http://blackrockdigital.github.io/startbootstrap-scrolling-nav/)
I want to place the navbar at the bottom in the #intro section and to become fixed at the top when scrolling down.
Question:
How to prevent the navbar from jumping up and down (both when scrolling and when clicking a navigation element)?
//////////////////////////////////////////////////////
Solution:
I solved the problem by adding some CSS to the demo mentioned above:
.navbar {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
margin: 0;
}
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 1030;
}
and changed the jQuery code to:
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 50;
if ($(window).scrollTop() > navHeight) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
});
For demo look JSFiddle: https://jsfiddle.net/90jbhe54/
Now it works nice and fluently.
Related
I'm attempting to make a form sticky sidebar on my Squarespace website. This is the JQuery I'm using to achieve the sticky sidebar. I'm trying to create a fade in effect when the form attaches to the scrolling and fade out effect right before the form touches the footer (and vice versa for scrolling up).
Here is my JQuery script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery("document").ready(function($){
var nav = $('form');
var footerTop = $('footer').offset().top;
var navHeight = $('#form').outerHeight();
var stopPoint = footerTop - navHeight - 70;
$(window).scroll(function () {
if ($(this).scrollTop() >= 450) {
nav.addClass("form-fixed");
} else {
nav.removeClass("form-fixed");
}
if ($(this).scrollTop() >= 2740) {
nav.addClass("form-stop");
} else {
nav.removeClass("form-stop");
}
});
});
</script>
Here is my CSS:
/*Home V2*/
.form
{posiiton: relative;}
.form-fixed
{position: fixed;
background-color: #F5FFFB;
top: 80px;
right: 7%;
z-index: 9999;
width: 20%;}
.form-stop
{position: absolute;
bottom: 0;
top: auto;
left: 0;}
I've been trying to attach .fadeIn() or .fadeOut() at the ends of the add/remove class commands. It works, but it's either only complicit during one command or fading in and out repeatedly. Any help?
I want mynavbar to be transparent when the page is scrolled to the top, however when the user scrolls I would like it to be made opaque. I tried this with javascript, but something still isn't working.
http://jsfiddle.net/6A6qy/
function myFunction() {
if ($(window).scrollTop() < 50) {
document.getElementById("masthead").style.opacity = "0.5";
}
}
#masthead {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
opacity: 1;
}
#container {
background-color: blue;
height: 1000px;
display: block;
margin-top: -50px;
}
<body onload="myFunction()">
<nav id="masthead">
<!-- Fixed navigation bar content -->
</nav>
<div id="container"></div>
</body>
How about this:
JS:
// listen for scroll
$(window).scroll( function() {
// apply css classes based on the situation
if ($(".masthead").offset().top > 100) {
$(".masthead").addClass("navbar-scrolled");
} else {
$(".masthead").removeClass("navbar-scrolled");
}
}
CSS:
.navbar-scrolled {
/* some css for navbar when scrolled */
}
JSFiddle example:
http://jsfiddle.net/8ruwnaam/
And then of course you could add some optimization to not apply the classes all the time if they are already there. But it works quite fine without such things as well.
Additional things:
The first version of this answer and your question use IDs for styling, which is not really a good idea according to a lot of people. Styling IDs goes against the DRY principles, and causes all these funny little problems when you forget to think about CSS specificity. IDs are quite alright for a lot of things when it comes to the logic in the JS or something, but try to use classes for styling.
You should create an .opaque css class and attach it based on actively scrolling or if scrollTop is < 50:
.opaque {
opacity: 0.5;
}
Then attach that class on('scroll') or at scrollTop (this is using the debounce plugin):
function myFunction() {
var $masthead = $('#masthead')
, $window = $(window);
// currently scrolling
$window.scroll($.debounce( 250, true, function(){
$masthead.addClass('opaque');
}));
// done scrolling
$window.scroll($.debounce( 250, function(){
// if at the top, add or keep opaque class
if($(this).scrollTop() < 50) {
if(!$masthead.hasClass('opaque')) {
$masthead.addClass('opaque');
}
} else {
$masthead.removeClass('opaque');
}
}));
}
You need to set it to be transparent by default (as it will be on the top) like that
#masthead {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
opacity: 0.5; /*edited the opacity to be 50% by default*/
}
then use this script to achieve your needs:
$(document).ready(function () {
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
if (ScrollTop < 100) {
document.getElementById("masthead").style.opacity = "0.5";
} else {
document.getElementById("masthead").style.opacity = "1";
}
});
});
So I'm currently working on a project and have the correct code for sticking the menu bar to the top once it has been scrolled passed. However, when the menu bar is not 100% of the page, it crunches to the left. Anyone have a clue how to put it right back to where it was?
HTML CODE:
<div class="menucontainer">
<ul class="menu">
<li>Home</li>
<li>History</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="stickyalias"></div>
jQuery CODE:
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('.menucontainer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('.menucontainer').css({ position: 'fixed', top: '0px' });
$('#stickyalias').css('display', 'block');
} else {
$('.menucontainer').css({ position: 'static', top: '0px' });
$('#stickyalias').css('display', 'none');
}
});
});
Some CSS code:
.menucontainer {
height: 50px;
line-height: 50px;
clear: both;
z-index: 9999;
opacity: .9;
margin-left: auto;
margin-right: auto;
width: 1100px;
}
If it helps anyone at all, the page can be visited at mor.actiongymok.com to see the live version of it running.
This is the expected behaviour of a fixed element... If you haven't specified a left value it will default to left:0;. So to center it, give it:
left: 50%;
margin-left: -550px; // half the width of your header
You will have to adjust this as necessary across breakpoints but that is why your nav is jumping over like that.
I think your menu has a fixed width. When your menu sticks to the top, change the width of the class .menucontainer to 100%.
If you want that your menu remains from the same size, add the following CSS to your .menucontainer
.menucontainer{
left: 0;
right: 0;
}
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('.menucontainer').offset().top;
var menuContainerWidth =$('.menucontainer').outerWidth();
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('.menucontainer').css({ position: 'fixed', top: '0px',left:'50%',marginLeft:menuContainerWidth/2 + 'px'});
$('#stickyalias').css('display', 'block');
} else {
$('.menucontainer').css({ position: 'static', top: '0px',left:'auto',marginLeft:'0px' });
$('#stickyalias').css('display', 'none');
}
});
});
I would suggest using bootstrap3. It should come built into Visual Studio. It makes it so much easier using their pre built css.
I am attempting to create a navigation bar that remains fixed only after it has reached the top of the page. I have the code working so that the nav is fixed, but I can't seem to get it to scroll to the top first.
Here's the HTML:
<div id= "home"> contentcontentcontent </div>
<div id="nav">
home
go green
your area
how to</div>
And the CSS:
nav {
text-align: center;
top: 600;
z-index: 100;
position: fixed;
width: 100%;
border: 0;
margin-bottom: 0;}
fixed {
top:600;
z-index: 100;
position: fixed;
width: 100%;}
home {
overflow: hidden;}
And the jQuery:
$(document).ready(function() {
$(window).scroll(function () {
//console log determines when nav is fixed
console.log($(window).scrollTop())
if ($(window).scrollTop() > 600) {
$('#nav').addClass('fixed');
}
if ($(window).scrollTop() < 601) {
$('#nav').removeClass('fixed');
}
});
These were based off of responses to similar questions on this site, but nothing has seemed to work so far. Does anyone know what's wrong with my code?
When writing a CSS selector, ids and classes need to be prefixed by a # or a . respectively. In your CSS you have
nav { // rules }
fixed { // rules }
home { // rules }
When you should have
#nav { // rules }
.fixed { // rules }
#home { // rules }
Here is a fiddle of your code working.
I am using following code to make a menu sticky when the window is scrolled down. It works fine if the window height is enough to scroll down the full header area, but it it creates problem is the height is just close enough to scroll, in that case it starts flashing and does not let scroll.
Here is the demo of the problem, refresh couple of times and try to scroll down. I have set the body height to 622px to reproduce the problem:
http://jsbin.com/ipEROYO/1
Here's the code I'm trying:
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
CSS:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
It's because when you are setting the navigation div to position:fixed you are shortening the length of the document (by the height of that div), which then causes the scroll bar to go away, which causes the scrollTop() value to be 0 which causes the .nav div to be position:static and it is an endless cycle if you keep scrolling down.
Here's my quick solution:
$(document).ready(function() {
var height = $('.nav').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$('.nav').css('position','fixed');
$('body').css('padding-bottom',height+'px');
}
else if($(this).scrollTop() <= height)
{
$('.nav').css('position','static');
$('body').css('padding-bottom','0');
}
});
$(window).scroll();
});
Just modified the JSbin. Check it out. You were really close, just doing more than you needed to like setting the sticky class on load of the page rather than when the function first runs. Let me know if this helps.
try that
$(window).scroll(function () {
var scroll_top = $(this).scrollTop();
if (scroll_top > 66) {//height of header
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
});
Strongly recommend a CSS only solution for this layout. No one seems to know what to call this method, so I've been referring to it as the absolute stretch technique, but in my experience it works beautifully across mobile devices and PC's including all major browsers except IE6 and below. There is some discussion of it here.
body, .header, .nav, .mainContent{
position: absolute;
top: 0;
left: 0;
right: 0;
}
body, .mainContent {
bottom: 0;
}
.header{
height: 120px;
}
.nav{
height: 70px;
top: 120px;
}
.mainContent{
top: 190px;
overflow: auto;
}
You'll find you can get very robust, concise, well organized layouts in this manner, and fixed headers, footers and sidebars follow very easily.