Develop Reference

Looking to make a scrolling (left to right) highlighted in page navigation bar

I'm looking to make a left to right scrolling navigation menu that's items are highlighted as you scroll down the page. This navigation will look similarly to the following in page navigation on Chase.com (https://www.chase.com/digital/customer-service?jp_cmp=rb/tap/off/na/prt). Please note that I want this navigation to stay scrollable on all devices.
Below is what I have so far. I'm currently having the issue with getting the nav options to scroll into focus as they are highlighted.
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("inpagenav");
var sticky = inpagenav.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
inpagenav.classList.add("sticky")
} else {
inpagenav.classList.remove("sticky");
}
}
// cache the navigation links
var $navigationLinks = $('#inpagenav > ul > li > a');
// cache (in reversed order) the sections
var $sections = $($(".pagenavsection").get().reverse());
// map each section id to their corresponding navigation link
var sectionIdTonavigationLink = {};
$sections.each(function() {
var id = $(this).attr('id');
sectionIdTonavigationLink[id] = $('#inpagenav > ul > li > a[href=\\#' + id + ']');
});
// throttle function, enforces a minimum time interval
function throttle(fn, interval) {
var lastCall, timeoutId;
return function() {
var now = new Date().getTime();
if (lastCall && now < (lastCall + interval)) {
// if we are inside the interval we wait
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
lastCall = now;
fn.call();
}, interval - (now - lastCall));
} else {
// otherwise, we directly call the function
lastCall = now;
fn.call();
}
};
}
function highlightNavigation() {
// get the current vertical position of the scroll bar
var myPadding = $('#inpagenav').height();
var scrollPosition = $(window).scrollTop();
// iterate the sections
$sections.each(function() {
var currentSection = $(this);
// get the position of the section
var sectionTop = currentSection.offset().top;
// if the user has scrolled over the top of the section
if (scrollPosition + myPadding >= sectionTop) {
// get the section id
var id = currentSection.attr('id');
// get the corresponding navigation link
var $navigationLink = sectionIdTonavigationLink[id];
// if the link is not active
if (!$navigationLink.hasClass('active')) {
// remove .active class from all the links
$navigationLinks.removeClass('active');
// add .active class to the current link
$navigationLink.addClass('active');
}
// we have found our section, so we return false to exit the each loop
return false;
}
});
}
$(window).scroll(throttle(highlightNavigation, 100));
// if you don't want to throttle the function use this instead:
// $(window).scroll( highlightNavigation );
.mainimage {
text-align: center;
height: 300px;
background: gray
}
nav {
background: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
list-style: none;
padding: 0rem;
overflow: auto;
white-space: nowrap;
margin: 0rem;
overflow-x: scroll;
}
nav ul::-webkit-scrollbar-thumb {
background: #000;
}
nav ul li {
padding-top: 1rem;
vertical-align: center;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: dodgerblue;
display: inline-block;
margin: 0rem 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid transparent;
}
nav ul li a:hover {
color: #0054a4;
border-bottom: 3px solid #0054a4;
}
nav ul li .active {
color: #308ce3;
font-weight: bold;
border-bottom: 3px solid #308ce3;
}
#section1 {
text-align: center;
height: 500px;
padding: 4rem 0rem;
background: orange;
}
#section2 {
text-align: center;
height: 200px;
padding: 4rem 0rem;
background: green;
}
#section3 {
text-align: center;
height: 300px;
padding: 4rem 0rem;
background: blue;
}
#section4 {
text-align: center;
height: 500px;
padding: 4rem 0rem;
background: red;
}
#section5 {
text-align: center;
height: 500px;
padding: 4rem 0rem;
background: pink;
}
#section6 {
text-align: center;
height: 500px;
padding: 7rem 0rem;
background: purple;
}
#section7 {
text-align: center;
height: 500px;
padding: 7rem 0rem;
background: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="menu.css">
<body>
<div id="contentwrapper">
<div class="mainimage">
<h1>The whole world</h1>
</div>
<nav id="inpagenav">
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
<li>Section 6</li>
</ul>
</nav>
<section id="section1" class="pagenavsection">
I'm section 1
</section>
<section id="section2" class="pagenavsection">
I'm section 2
</section>
<section id="section3" class="pagenavsection">
I'm section 3
</section>
<section id="section4" class="pagenavsection">
I'm section 4
</section>
<section id="section5" class="pagenavsection">
I'm section 5
</section>
<section id="section6" class="pagenavsection">
I'm section 6
</section>
<section id="section7">lo</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="ScrollMenu.js"></script>
</body>
</html>

You might just need to call $navigationLink.scrollIntoView() when you toggle the active class.
Per this answer, you may need to pass special options to scrollIntoView because the items are laid out horizontally.
$navigationLink.scrollIntoView({ inline: 'end' })
// end is my guess; allowable values are: start, center, end, or nearest (the default)

A Vertical Navigation Bar Moving to The Top

I'm trying to make my vertical navigation bar to move to the top when the user scrolls (the original position is not at the top).
I only know HTML, CSS and JavaScript, so I don't know jQuery.
Here is the code for the navigation bar:
Is there something wrong with the class or id names or is it the JavaScript code?
var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");
window.addEventListener("scroll", navigationFixing());
function navigationFixing() {
if (body.scrollTop > navigation.getBoundingClientRect().bottom)
{navigation.className = "fixedNavigation";
}
else {
navigation.className = "notFixedNavigation";
}
}
#navigation {list-style-type: none;
width: 15%;
margin: 0px;
padding: 0px;
font-size: 35px;
border: 1px solid;
height: 100%;
background-color: #d6d6c2;
overflow: auto;
position: absolute;
}
.navigationbar {
border-bottom: 1px solid black;
}
.navigationbar a {display: block;
background-color: #C0C0C0;
padding-left: 10px;
padding-bottom: 16px;
text-decoration: none;
color: #ffffff;
}
.navigationbar a:hover {background-color: #404040;
color: white;}
.navigationbar a.nuvarande {background-color: black;
}
.fixedNavigation {
position: fixed;
top: 0;
left: 0;
}
.notFixedNavigation {
position: absolute;
}
<ul id="navigation" class="notFixedNavigation">
<li class="navigationbar">
Home
</li>
<!---------------DATOR-------------------
<li class="navigationbar">
Play
</li>
---------------------------------------->
<li class="navigationbar">
Rules
</li>
<li class="navigationbar">
Tactics
</li>
<li class="navigationbar">
Contact
</li>
</ul>

You care calling your event handler immediately, instead of attaching it to the listener. Remove the parens.
window.addEventListener("scroll", navigationFixing);
In addition, navigation.getBoundingClientRect().bottom will change when the position changes. Better to set it outside the function.
var pos = navigation.getBoundingClientRect().bottom;
function navigationFixing() {
if (body.scrollTop > pos) {...}
}
Also note from #bestinamir, your CSS is being overwritten. It needs some work, but you can start with:
.fixedNavigation {
position: fixed !important;
top: 0;
left: 0;
}

Menu want get fixed to the top on scroll

I'm trying to accomplish a simple effect of sticking the menu to top of the browser window when scrolling passes a certain point, but something went wrong and the menu wont get fixed to the top. From the libraries I'm using jQuery and animate it.
My code is as follows:
HTML:
<nav class="animatedParent">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>
CSS:
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
width: 400px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 35px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
JS (jQuery):
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
});
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
});
var nav = $("nav").offsetTop();
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
console.log('Hello!');
} else {
$("nav").removeClass("fixedNav");
}
});

So first off, you only use the code once, which is when the document is loaded. You're going to want to check everytime you scroll the document as the code should obivously be triggered once you scroll a certain amount.
$(document).scroll(function(){
var nav = $("nav").height();
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
} else {
$("nav").removeClass("fixedNav");
}
});
body {
background: black;
height:700px;
}
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
display: block;
height: 100px;
width: 100%;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 35px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent nav">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>

You need to use the event scroll and check the offset there.
When the user is scrolling, toggleClass will add/remove the class based on the condition $window.scrollTop() > navOffset which will return true or false
var $window = $(window);
var $nav = $('nav');
var navOffset = $nav.offsetTop();
$window.on('scroll', function() {
$nav.toggleClass('fixedNav', $window.scrollTop() > navOffset);
});

add an scroll event to check your scroll position
for example:
$(document).scroll(()=>{...});
like here
This is a very plain demo, it only demonstrate wha i meant

You can use a library like scrollMonitor to accomplish your task as scroll monitoring have its own caveats.
You can let scrollMonitor to lock position of your menu when it leaves viewport, something like this:
var $menu = document.querySelector('nav'); // It is better to use CSS class name instead
var watcher = scrollMonitor.create($menu);
watcher.lock();
watcher.exitViewport(function() {
$menu.classList.add('fixedNav');
});
watcher.enterViewport(function() {
$menu.classList.remove('fixedNav');
});
Please refer this example as it closely matches your task.

You don't fire the check for the current scroll on scroll event. That's an event you're looking for.
Also you could check the scrollTop on the document (it's more error proof in jQuery), not on the window as it doesn't always work.
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
});
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
});
$(document).on('scroll', function() {
var nav = $("nav").offsetTop();
if($(document).scrollTop() > nav) {
$("nav").addClass("fixedNav");
console.log('Hello!');
} else {
$("nav").removeClass("fixedNav");
}
})
});

That is what you are looking for:
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
}) ;
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
}) ;
});
$(document).ready(fixedHeader) ;
$(window).scroll(fixedHeader) ;
function fixedHeader() {
var nav = parseInt($("nav").css("margin-top")) ;
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
}
else {
$("nav").removeClass("fixedNav");
}
}
body{
height: 1000px;
}
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
width: 400px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 20px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>

Small bug with click-to-scroll menu in jQuery

On my website I have set up a "click-to-scroll" menu with the logic of:
1. when menu link is clicked, scroll to corresponding anchor and add active class to $(this)
2. onscroll, toggle active class according to the current anchor's location
This all works fine, but there is a small bug in that when you click a link, the page flickers slightly and so do the active menu links. You can see and test it live at http://jcwd98.appspot.com/ (warning that it's in its early development stages, no mobile and probably looks pretty crappy right now).
I'm not sure what causes the page to flicker, but I do know that the reason the menu links flicker is because my code is telling it to add an active class to it when it scrolls over its corresponding section. Since the document has to first scroll over a section to get to the desired section, it adds an active class to other links before it arrives.
I don't want either of these scenarios.
jsFiddle
Code:
var section_padding = 45;
$("#menu ul li a").on("click", function(event) {
event.preventDefault;
$("#menu ul li a.active").removeClass("active");
$(this).addClass("active");
var target = this.hash;
var menu = target;
var cache_target = $(target);
var buffer = (cache_target.offset().top - section_padding);
$("html, body").stop().animate({
"scrollTop": buffer
}, 400, "swing");
});
function scroll(event) {
var scroll_pos = $(document).scrollTop();
$("#menu ul li a").each(function() {
var cur_link = $(this);
var ref_el = $(cur_link.attr("href"));
if( ref_el.position().top <= scroll_pos && ref_el.position().top + ref_el.height() + (section_padding * 2) > scroll_pos ) {
$("#menu ul li a").removeClass("active");
cur_link.addClass("active");
} else {
cur_link.removeClass("active");
}
});
}
$(document).on("scroll", scroll);
* {
margin: 0;
padding: 0;
}
#menu {
display: block;
height: 50px;
width: 100%;
position: fixed;
z-index: 100;
background: rgba(255, 255, 255, .8);
}
#menu ul {
display: block;
width: 100%;
height: 100%;
list-style: none;
}
#menu ul li {
display: block;
box-sizing: border-box;
height: 100%;
width: calc(100% / 5);
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
float: left;
text-align: center;
line-height: 50px;
}
#menu ul li a {
display: block;
text-decoration: none;
font-family: arial;
}
#menu ul li a:hover,
#menu ul li a.active {
background: #f0f0f0;
}
#sections {
display: block;
position: relative;
top: 50px;
}
section {
display: block;
height: 500px;
width: 100%;
background: #67D182;
padding: 45px 50px;
box-sizing: border-box;
}
#sections section:nth-child(even) {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Top</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div id="sections">
<section id="top">
<h2>#top</h2>
</section>
<section id="about">
<h2>#about</h2>
</section>
<section id="portfolio">
<h2>#portfolio</h2>
</section>
<section id="contact">
<h2>#contact</h2>
</section>
<section id="blog">
<h2>#blog</h2>
</section>
</div>
Any help would be greatly appreciated. :)

This happen because preventDefault is a function, then you only need to change:
event.preventDefault;
To:
event.preventDefault();
And this work fine.
FIDDLE: https://jsfiddle.net/lmgonzalves/ve5qr3bL/2/
EDIT:
You need to unbind the scroll event, and then bind it again when the animation be completed.
$("#menu ul li a").on("click", function(event) {
event.preventDefault();
$(document).off("scroll"); // here unbind
// code
$("html, body").stop().animate({
"scrollTop": buffer
}, 400, "swing", function() {
$(document).on("scroll", scroll); // here bind again
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/ve5qr3bL/3/

jQuery idTabs - Auto Change and Fade With Mouseover

I'm using jQuery idTabs in an upcoming redesign for my website. I've styled it to my content and it looks great, but there are a couple of functions which are missing what I require.
First, here's what I'm using right now:
<script type="text/javascript">
$("#featured").idTabs("!mouseover");
</script>
Obviously, the code above means that it changes to the next tab when hovered, making clicking unnecessary.
Here's what I want to do:
1 - Have the tabs automatically changed every specified number of seconds when the user is not interacting with them.
2 - When they change, have them fade. There is actually already a function for this in idTabs:
<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>
The only problem is that it doesn't work well with the mouseover event. Rather than fading-in on each mouseover, it simply changes automatically.
Can anyone help me out with this?
It'd be greatly appreciated! Thanks!

Here i have done complete bins for changing tab automatically on some time interval without mouse over or click. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7r/2
HTML
<div>
<div id="adv2">
<ul>
<li>
<a class="selected" href="#ani1">
1
</a>
</li>
<li>
<a href="#ani2">
2
</a>
</li>
<li class="split">
</li>
<li>
<a href="#ani3">
3
</a>
</li>
<li>
<a href="#ani4">
4
</a>
</li>
</ul>
<span>
<p id="ani1">
Click on the tabs to see a nice fade.
</p>
<p id="ani2">
You're not impressed?
</p>
<p id="ani3">
But it's so cool... in a nerdy way.
</p>
<p id="ani4">
Download idTabs and have your cake. You can eat it too.
</p>
</span>
</div>
</div>
jQuery
$(function() {
var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
var current = $("#adv2 ul a.selected").attr("href");
var index = ($.inArray(current, tabList) + 1) % tabList.length;
tabClick(tabList[index], tabList, tabDiv);
}
var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
if (!tabList) {
tabList = list;
}
if (action && action.event == "click") {
timer && clearInterval(timer);
timer = setInterval(rotate, interval);
}
$("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
for (i in list) {
$(list[i]).hide();
}
$(id).fadeIn();
return false;
}
$("#adv2").idTabs(tabClick);
});
** CSS:**
body{
font: 10pt Calibri,Arial,sans-serif;
text-align: center;
color: #FFFFFF;
background: none repeat scroll 0 0 #111111;
margin: 0;
padding: 0;
}
#adv2 {
background: none repeat scroll 0 0 #181818;
margin-left:5%;
margin-top:5%;
width: 500px;
}
#adv2 ul{
display: block;
float: left;
height: 50px;
width: 50px;
margin:0px;
background:#333;
}
#adv2 li {
float: left;
}
li {
list-style: none outside none;
}
#adv2 li a.selected {
background: none repeat scroll 0 0 snow;
color: #111111;
font-weight: bold;
}
#adv2 li a {
display: block;
height: 25px;
line-height: 22px;
text-decoration: none;
width: 25px;
}
#adv2 li a:hover {
background:#0A0A0A;
}
#adv2 li.split {
clear: both;
}
a{
color: #FFFFFF;
}
a {
outline: medium none;
}
#adv2 span {
background: none repeat scroll 0 0 #181818;
float: right;
height: 50px;
line-height: 45px;
width: 410px;
}
Demo: http://codebins.com/bin/4ldqp7r/2