I have two menus in use on a site I'm building. The second menu is a category menu, and I need to make it stick to the top of the page as a user scrolls down the page to view content. I had it working previously, but had to remove some elements from my header. For whatever reason, it won't work now. Code to follow.
<script type="text/javascript">
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#scroller-anchor').offset().top;
if (window_top > div_top)
jQuery('#navbar').addClass('sticky')
else
jQuery('#navbar').removeClass('sticky');
}
jQuery(function() {
jQuery(window).scroll(sticky_relocate);
sticky_relocate();
});</script>
And the menu structure looks like this...
<div id="scroller-anchor"></div>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-category-menu-container">
<ul id="menu-category-menu" class="nav-menu">
<li id="menu-item-1408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1408">
All
</li>
<li id="menu-item-1414" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1414">
Videos
</li>
<li id="menu-item-1409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1409">
Entertainment
</li>
<li id="menu-item-1412" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1412">
Politics
</li>
<li id="menu-item-1413" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1413">
Sports
</li>
<li id="menu-item-1410" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1410">
Fashion
</li>
</ul>
</div>
</nav><!-- #site-navigation -->
</div>
Help?
EDIT
Forgot to include what was in the sticky class.
.sticky {
position: fixed;
top: 0;
}
EDIT2
Attempted the following fix, still to no avail.
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({ scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky )
{ jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else { jQuery('#navbar').removeClass('sticky'); // remove sticky css class } });
</script>
for anyone interested in making a sticky nav on scroll:
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({
scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky ) {
jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else {
jQuery('#navbar').removeClass('sticky'); // remove sticky css class
}
}
});
Related
How would I go about closing a push canvas menu when the use scrolls? or clicks off of it.
Below is the HTML and Jquery. Thanks in advance!
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="menu-primary-container">
<ul id="menu-primary" class="menu">
<li>Home</li>
<li>Creative</li>
<li>Online</li>
<li>Print</li>
<li>The Studio</li>
<li>Our Work</li>
<li>Snippets</li>
<li>Blog</li>
<li>Get in touch</li>
</ul>
</div>
<div class="mobile-phone">01268 271 858</div>
</nav>
toggle your pushmenu classes on scroll.
window.addEventListener('scroll', function(e) {
$('.pushmenu-push').removeClass('pushmenu-push-toright');
$menuLeft.removeClass('pushmenu-open');
});
you might want to add timer to prevent the menu from scrolling if the user accidentally scrolls before choosing a menu item (could happen on touch devices).
I decided to use an HTML5up template (Verti => here) as the basis for a WordPress theme for a client. The client needed me to deploy early, so the site is live=> here. The side navigation doesn't work on IOS/ safari, or Chrome on an iPhone. Those are the only browsers with problems
Here's the javascript called in the footer:
$('.banner').unslider({
arrows: true,
fluid: true,
dots: true,
fade:true
});
// Find any element starting with a # in the URL
// And listen to any click events it fires
$('a[href^="#"]').click(function() {
// Find the target element
var target = $($(this).attr('href'));
// And get its position
var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};
// jQuery will return false if there's no element
// and your code will throw errors if it tries to do .offset().left;
if(pos) {
// Scroll the page
$('html, body').animate({
scrollTop: pos.top,
scrollLeft: pos.left
}, 1000);
}
// Don't let them visit the url, we'll scroll you there
return false;
});
$("#mygallery").justifiedGallery({
rowHeight : 160
});
And here's the navigation:
<div id="header-wrapper">
<header id="header" class="container">
<!-- Logo -->
<div id="logo">
<h1>Culinary Craft</h1>
<span>Catering Co.</span>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current">Home</li>
<li>
Services
<ul>
<li>
Services
<ul>
<li>Catering</li>
<li>Liquid Catering</li>
<li>Weddings and Corporate Events</li>
</ul>
</li>
<li>Planning</li>
<li>Execution</li>
<li>Menus</li>
</ul>
</li>
<li>About
<ul>
<li>Why Culinary Craft?</li>
<li>Our Executive Team</li>
<li>Frequently Asked questions</li>
<!--<li>Orange County</li>-->
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
I'm trying to figure out why the nav wouldn't work, but only for these specific browsers.
Super newb question here, but my brian is not working tonight. I'm using a provided JS script on a wordpress site to make a single-page website menu scroll to the relevant section.
I have a menu with options 'Home' 'People' 'Info' 'Contact'
These links are structured like so: "http://sample.com/#home"
<!-- Navigation Menu -->
<div class="collapse navbar-collapse" id="navigation">
<ul id="menu-menu-1" class="nav navbar-nav navbar-right"><li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15">
Home</li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu- item-51">
People</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">
Info</li>
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54">
Contact</li>
</ul>
</div>
<!-- End Navigation Menu -->
The JS follows below.
//Navigation Scrolling
$('#navigation a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
The problem: When clicking the menu-links, the page reloads and shows the relevant section.
I would like the menu items to scroll to the relevant section instead.
Thanks.
TL;DR Menu items reload page instead of scrolling to relevant section. JS above.
Just prevent the default functionality of the anchor tag by using event.preventDefault(),
$('#navigation a[href*=#]').click(function(e) {
e.preventDefault();
//Rest of your code
The submenu on each menu item slides underneath the main menu item instead of sliding out whenever I click on a menu item, which is what it's supposed to do. Problem is the site itself automatically scrolls up. Its as if the main menu items have a link to them that is anchored to the top of the site. I click on them, the submenu slide out, but the site itself scrolls up everytime.
How to make the code cross-browser compatible?
The javascript code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
The html code:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Based off of this menu: http://www.pmob.co.uk/temp/drop-down-expand.htm#
The reason is because you have "#" in your hrefs...this is telling the browser to return to the top. You need to return false on your onclick so that the default behavior (navigating to the href) doesn't happen on the items that are not truly "links".
You can always add e.preventDefault() to the event listener to remove all hyperlink-effects after clicked.
Using preventDefault is usually more recommended.
http://jsfiddle.net/Z8Uvj/
$("a").click(function(e){
//your stuff
e.preventDefault();
});
I have a dropdown (ul.sub-menu) with items inside (ul.sub-menu > li) that I'd like to apply jQuery Masonry to, but my dropdown is absolutely positioned. Is there a way to do this and keep my absolute positioning on the parent element?
Javascript
jQuery("ul > li > ul.sub-menu").masonry({
itemSelector: '.brick',
columnWidth: 300
});
HTML
<ul>
<li id="menu-item-9451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9451"><a href="/solutions/" >Solutions</a>
<ul class="sub-menu">
<li id="menu-item-9458" class="brick"><a href="/solutions/internal-social-software/" >Internal Social Software</a></li>
<li id="menu-item-9457" class="brick"><a href="/solutions/video-content-managment/" >Video Content Managment</a></li>
<li id="menu-item-9456" class="brick"><a href="/solutions/enterprise-content-management/" >Enterprise Content Management</a></li>
<li id="menu-item-9455" class="brick"><a href="/solutions/secure-file-sharing/" >Secure File Sharing</a></li>
<li id="menu-item-9454" class="brick"><a href="/solutions/redaction-and-document-viewing/" >Redaction and Document Viewing</a></li>
<li id="menu-item-9453" class="brick"><a href="/solutions/real-time-business-intelligence/" >Real Time Business Intelligence</a></li>
<li id="menu-item-9452" class="brick"><a href="/solutions/mobile-enterprise-applications/" >Mobile Enterprise Applications</a></li>
</ul>
</li>
</ul>
In your Masonry settings try:
containerStyle: { position: 'absolute' }
See docs on containerStyle
By default, Masonry sets position: relative on the container.