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) ?
Related
I cannot make work a semanticui sticky menu when I set a visible sidebar. There is a JSFiddle explaining the issue. The top menu glitches and does not seem to follow the scroll.
<div class="example">
<div class="ui visible inverted left vertical sidebar menu" id="left-menu">
<a class="item">Option 1</a>
</div>
<div class="pusher">
<div class="ui sticky menu" id="top-menu">
<a class="item">Menu</a>
</div>
<div style="height:3000px; background-color:red;">
Example with ui sticky menu
</div>
</div>
</div>
<script>$(function(){ $('#top-menu').sticky(); });</script>
Do you know how to fix this?
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>
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/
I am revealing a hidden nav on click. It is a div that is in fixed position at the top of a bootstrap template.
I want the nav to slide down after clicking whilst also adjusting the top margin of the lower page content. All this is working but I have an unwanted bouncing effect and the scroll bar is also moving slightly down each time the nav reveals itself.
HTML:
<!-- Member Site Sub Nav 2 -->
<div class="col-xs-12 member-sub-nav-b" id="memberSubNavB">
<ul>
<li>DESIGNATIONS</li>
<li>MEMBERSHIP PRICING SCHEDULE</li>
<li>LOCUMS</li>
<li>MEMBERSHIP TYPES</li>
<li>MEMBER REWARDS</li>
<li>ASSOCIATES & LIFE MEMBERS</li>
</ul>
</div>
</div>
<!-- Member Site Sub Nav 2 Ends -->
</div>
<!-- Section Begins -->
<section id="data" class="member-text row">
<div class="col-md-10 col-md-offset-1">
And the jQuery:
function subNavB(){
$('#mainLogo').click(function(){
$('#memberSubNavB').slideDown(200, 'linear');
$('.col-md-10').animate({'marginTop':'2.5em'}, 200, 'linear');
});
}
Have been looking around for a solution/plugin that handles. navigation, menu highlighting and hash change (both on scroll and menu click) but can't really find one. I have this markup of sections for a one page site and i want to implement the bow mentioned in a nice way.
so basically
- change hash on scroll and menu click (menu also needs highlighting). Both on scroll and when clicked.
EDIT: exactly like this but i need the hash to change on scroll as well.
http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/
html
<nav id="main-nav">
<ul>
<li>
product
</li>
<li>
process
</li>
<li>
testimonials
</li>
<li>
contact
</li>
</ul>
</nav>
<section class="main-section" id="product">
</section>
<section class="main-section" id="process">
</section>
<section class="main-section" id="testimonials">
</section>
<section class="main-section" id="contact">
</section>
You can update your URI by calling history.pushState('/myPage#MyNewURI')
That won't reload the page, just change the URI.