For some reason on my webpage, the javascript for a sticky navbar isn't running at all. Here is the jsfiddle. The navbar (in bright orange) runs across the top of the page - at the base of header. The script is set to make the navbar visible after the user scrolls past a point and then past a further point, it is meant to make it fixed to the top of the viewport with the help of .offset().top;.
I've tried out the exact same script in a similar implementation and it works. Would appreciate anyone's help pointing out the glitch.
the problem is the z-index in your html Layout
<header>
<div class="mainheader">
<img class="logo" src="images/logoinner.png">
<img class="detail1" src="images/detail1.png">
</div>
<div class="subheader"></div>
<div id="menu-wrapper">
<nav id="menu">
<div class="menu">
<ul class="menu">
<li>
<img class="logoflag" src="images/logoflag.png">
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="contentwrap">
.....
</div>
You only set the z-index of the menu wrapper div but the z-index of the header was still smaller than the z-index of your div class="contentwrap". So just increase the z-index of the header and it should work.
here is a fixed fiddle:
https://jsfiddle.net/uh6e88n3/6/
Related
I'm having a problem with this ""fixed"" bottom navbar.
It is realized with bulma v0.8.0 and it I want it to always be visible in the same way (with or without scrolling).
Below code of the bottom navbar:
<html lang="en" class="has-navbar-fixed-bottom">
[...]
<nav id="navbar-bottom" class="navbar is-fixed-bottom is-hidden-tablet" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<div class="columns flex-center">
<div class="column socialtext">Share</div>
[...]
</div>
</div>
</nav>
And the results is like:
When I try to scroll down, the navbar show "correctly".
I have tried with some js library but still does not work.
Could I have some tips about that?
Thanks,
I tried adding smooth scrolling to my website. After copying the javascript and jquery from this website: http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/ I added the tags for the smooth scrolling. The smooth scrolling works for everything except one button on the nav bar. This is the code:
<nav id="nav">
<div class="navbar">
<div class="brand">hbvhaf</div>
<ul>
<li><span>about</span></li>
<li><span>bvdsvudva</span></li>
<li><span>contact</span></li>
</ul>
</div><!-- navbar -->
</nav>
The one button that doesn't smooth scroll is the one that has a div class of "brand". The div is used to specifically style that button in css. Any ideas.
I know that this is a bit of a hack, but why don't you just add this to the top of the page:
<div name="top"></div>
And then change your code to:
<nav id="nav">
<div class="navbar">
<div class="brand">hbvhaf</div>
<ul>
<li><span>about</span></li>
<li><span>bvdsvudva</span></li>
<li><span>contact</span></li>
</ul>
</div><!-- navbar -->
</nav>
Edit for author, example of it working properly:
<div name="top">I am the top of the page.</div>
Go To Contact Form
<div style="height:200%"></div>
<div name="contact">contact</div>
Back to top
<div style="height:200%"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothscroll.js"></script>
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
Is there a solution to have multiple sticky footers, one per section/div ?
Assume the following example:
<nav id="stickyHeaderMenu">
<!-- link_to section#one -->
<!-- link_to section#two -->
<!-- link_to section#three -->
</nav>
<section id="one">
<div class="content"> </div>
<nav id="footerNavOne"> </nav>
</section>
<section id="two">
<div class="content"> </div>
<nav id="footerNavTwo"> </nav>
</section>
<section id="three">
<div class="content"> </div>
<nav id="footerNavThree"> </nav>
</section>
The idea is to have one sticky header menu, and one sticky menu for the section in view at bottom of page. User scrolling down causes footer to change, depending on the section in view.
Note that sections are really tall, and take some scrolling to see all of it.
So when viewing section#one, nav#footerNavOne is the sticky footer. Once user reaches end of section#one, nav#footerNavOne sticks to it and goes up and out of page with it. Now section#two comes up, and nav#footerNavTwo becomes the new sticky footer.
update: I found the following, which looks pretty efficient: sticky-kit.js.
It sticks a div to the top of its parent. see this jsfiddle, showing it done on above example.
Is it possible to do the opposite: (stick the div to the bottom of parent) ?
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.