I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
Related
I am trying to make a navbar where brand image can be relocated when scrolling down like the example shown on http://www.agilent.com/home
I know how to addclass using jquery, but I don't know how to add an image when scrolling down or is there any other method to make this effect happen.
How can I achieve this effect? Thanks in advance!
You need to use two images. One on the heading and one on the nav.
This snippet will detect if the navbar is on top and add sticky class to a nav element.
$(window).scroll(function() {
if ($(window).scrollTop() > $("nav").offset().top) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
});
When the nav element uses sticky class, it should display the nav logo.
nav .logo {
display: none;
}
nav.sticky {
position: fixed;
top: 0;
}
nav.sticky .logo {
display: inline;
}
jsfiddle demo
I have a horizontal menu that sticks to the top of web browser after you scroll past it. To make it happen i'm using javascript (jquery). Now i want to hide that menu and show mobile menu at certain resolution, but when i give "display: none" to menu classes, it only hides original menu.
If i set .original or .menu to "display:none" it hides original static menu, and fixed menu sticks to the top of web browser immediately (you don't have to scroll).
Setting .cloned to "display:none" doesn't do anything.
How to get rid of that fixed menu ?
Script:
<script>
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
CSS:
#media screen and (max-width:960px){
.cloned {
display: none;
}
.original {
display: none;
}
.menu {
display: none;
}
#navi {
display: none;
}
#content {
width: 90%;
}
}
EDIT:
jsfiddle: https://jsfiddle.net/765kadoj/3/
The reason it is happening is because your javascript is overriding your css after it has been set. You have two options:
You need to write some javascript to change the css to display: none for the .cloned class when the screen is smaller than 960px.
You can use the !important override, which would look like this:
.cloned { display: none !important; }
However, I would strongly suggest using option 1, since the !important override typically isn't the best practice. For more information on !important, see this article.
this is what I have so far:
$("#main").each(function() {this.scrollTop = this.scrollHeight;
if ($(this).scrollTop()>0)
{
$('#navigation').addClass("nav-hide");
}
else
{
$('#navigation').addClass("nav-normal");
}
});
So basically, I am trying to figure out when you scroll to the top of a div it will hide the navigation bar. So you could read the div without the navigation bar over it. Any ideas? Thanks.
Here's my JSFiddle: https://jsfiddle.net/qb15p5g7/3/
You need to use jquery's window scroll function and not each function unless you are going to have more than one section that you need to hide the navigation on there is no reason to use each and I'm assuming that you don't because you are using an id for #main and Id's are supposed to be unique. Also you don't need to add more than one class you can just add the class and remove the class. So if im correct in assuming that you don't have more than one section that you need to hide the nav in multiple instances on your page then your code should look something like this:
$(window).scroll(function() {
if ($(this).scrollTop() >= $('#main').offset().top) {
$('#navigation').addClass("nav-hide");
}else {
$('#navigation').removeClass("nav-hide");
}
});
And you will just add the nav-hide class and then remove it when scrolling back up.
Here is a fiddle of this working JSFiddle Demo
I assume this is what you are looking for if not let me know so I can edit my answer.
The $(window).scroll() method executes on scroll change of the window. You can use it to hide your #navigation id selector
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#navigation').fadeIn();
} else {
$('#navigation').fadeOut();
}
});
JSFiddle here
See the jQuery documentation for .scroll() here
function scrollpos() {
if (window.scrollY<document.getElementById('header').clientHeight) {
document.getElementById('navigation').style.display = 'block';
} else {
document.getElementById('navigation').style.display = 'none';
}
}
#navigation {
width: 100%;
height: 50px;
background-color: #586e75;
position: fixed;
z-index: 1000;
transition: transform 200ms ease;
}
header,
section {
height: 100vh;
width: 100%;
position: static;
}
header {
background: #4f4244;
}
section {
background: #222222;
}
.nav-normal {
transform: translateY(0%);
}
.nav-hide {
transform: translateY(-100%);
}
<body onscroll="scrollpos()">
<div id="navigation"></div>
<header id="header"></header>
<section id="main"></section>
</body>
do u need something like this?#Steboney
Question
I want the navBar to stick conditionally on scroll. However there are bugs I can not quite diagnose, as I am new to jQuery. What is preventing the nav bar from sticking conditionally on scroll?
The jQuery in the jsfiddle below will not run correctly, and after trying for awhile to make it work, I cannot seem to make it run. I've looked at other examples of this but I'd rather not change the jQuery entirely until I know the reason that my code does not work. I will not link the HTML as it full of Lorem Ipsum test text body. It is found in the JSFiddle link.
What is the error in the javascript that isn't making the navBar apply the sticky class?
Javascript
var navTop = $(".nav").offset().top;
var stickyNav = function(){
if ($(window).scrollTop() >= navTop){
$(".nav").addClass(".sticky")
} else {
$(".nav").removeClass(".sticky")
}
};
stickyNav();
$(window).scroll(function(){
stickyNav();
};
CSS
* {
margin: 0;
box-sizing: border-box;
}
.mainHeader {
width: 100%;
height: 20%;
background-color: rgb(62, 65, 66);
text-align: center;
font-family: "Helvetica Nue";
}
.navigation {
width 100%;
height 10%;
background-color: rgb(89, 127, 143);
position: relative;
}
.sticky {
position: fixed;
}
https://jsfiddle.net/11u1bj5j/
You have some bugs in your js code. Firstly, .nav should be nav since your <nav> element has a class of navigation. So, we'll grab it by the tag name instead. Secondly, .addClass() and .removeClass() don't need the period before the class name.
Here's the updated javascript:
var navTop = $("nav").offset().top;
var stickyNav = function(){
if ($(window).scrollTop() >= navTop){
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
};
stickyNav();
$(window).scroll(function(){
stickyNav();
});
Here's an updated fiddle.
first of all you are adding/removing classes wrongly with jquery should be
.addClass("sticky") / .removeClass("sticky")
same with nav selection, there were some other small css problems too
here is working jsfiddle
I have a header, in which i put my h1 and h2 headings at top. The problem is that header scrolls along the scroll bar which is of course normal but i want to fixed it at some point when all the headings on header scroll away. At this point I want header to stop and stays fixed.
I already tried fixed position but of course it fixed heading as well which exactly I don't want.
I also tried this JavaScript but no luck.
JavaScript
$(window).scroll(function() {
var _height = 120 - (120 * $(this).scrollTop() / $('body').height());
if (_height >= 80) {
$('.header_container').height(_height);
}
});
and here qre my HTML and CSS codes respectively.
HTML
<div class="header_container" id="header_container">
<div id="header_titles">
<h1 class="homepage-heading">Browse</h1>
<h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
</div>
</div>
CSS
#header_container {
background-color: black;
width: 100%;
height: 120px;
top: 0;
left: 0;
right: 0;
}
#header_titles {
position: absolute;
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 10px;
}
So, let me see if I get this...you want your header to be scrolled normally with the page until a certain point where it becomes fixed?
EDIT
Ok, well, you could determine the element on the page that you want the position to be triggered at. Like, the top of a certain paragraph, and use that position in your condition.
var condition = $(element).offset().top;
if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }
and have header.fixedClassName have those proprieties ( with position fix, top 0 and width: 100% to your header etc). Be sure to add and remove a class on the body that gives it padding-top with the height of your displaced header.
Used some similar effect here http://goodmen.se/ after a point the logo shows up in the header, then there's a background change. You do something similar with your position.
EDIT 2
Here's an example fiddle http://jsfiddle.net/Corsico/vpskd8hd/
So you want a sticky header?
In your javascript create a code:
var $header_container = $('#header_container');
var header_height = $header_container.outerHeight(true);
if($(window).scrollTop() < header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
$(window).on('scroll', function(){
if($(window).scrollTop()< header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
});
This will add a sticky class to your header, and then you can set the header to be fixed:
.sticky{
position:fixed;
top:0;
left:0;
width:100%;
display:block;
}
This should do it. When you scroll pass the height of the header, you'll get the 'sticky' class, if not, you'll remove the sticky class...