jquery - Change CSS based on scroll position -- Refactoring bad code -


i have written jquery function changes css value of nav menu item based on if reference section viewable in window.

$(window).scroll(function() {      var scroll = $(window).scrolltop();      if (scroll <= 590) {         $("#menu-item-25 a").addclass('blue');         $("#menu-item-26 a").removeclass('blue');         $("#menu-item-22 a").removeclass('blue');         $("#menu-item-23 a").removeclass('blue');         $("#menu-item-24 a").removeclass('blue');     }     else if (scroll >= 591 && scroll <= 1380) {         $("#menu-item-26 a").addclass('blue');         $("#menu-item-25 a").removeclass('blue');         $("#menu-item-22 a").removeclass('blue');         $("#menu-item-23 a").removeclass('blue');         $("#menu-item-24 a").removeclass('blue');     }     else if (scroll >= 1381 && scroll <= 2545) {         $("#menu-item-22 a").addclass('blue');         $("#menu-item-25 a").removeclass('blue');         $("#menu-item-26 a").removeclass('blue');         $("#menu-item-23 a").removeclass('blue');         $("#menu-item-24 a").removeclass('blue');     }     else if (scroll >= 2546 && scroll <= 2969) {         $("#menu-item-23 a").addclass('blue');         $("#menu-item-25 a").removeclass('blue');         $("#menu-item-26 a").removeclass('blue');         $("#menu-item-22 a").removeclass('blue');         $("#menu-item-24 a").removeclass('blue');     }     else if (scroll >= 2970) {         $("#menu-item-24 a").addclass('blue');         $("#menu-item-25 a").removeclass('blue');         $("#menu-item-26 a").removeclass('blue');         $("#menu-item-22 a").removeclass('blue');         $("#menu-item-23 a").removeclass('blue');     } });

it looks awfully ugly. there better way achieve goal?

all previous answers work fine, because have multiple ways make better making changes css selectors, if calculations in scroll event, should read john resign post how deal scroll event, specially part:

it’s very, very, bad idea attach handlers window scroll event. depending upon browser scroll event can fire lot , putting code in scroll callback slow down attempts scroll page (not idea). performance degradation in scroll handler(s) result compound performance of scrolling overall. instead it’s better use form of timer check every x milliseconds or attach scroll event , run code after delay (or after given number of executions – , delay).
- john resign

so, in case go this:

html:

<div class="menu">     <a id="menu-item-22">link 1</a>     <a id="menu-item-23">link 2</a>     <a id="menu-item-24">link 3</a>     <a id="menu-item-25">link 4</a>     <a id="menu-item-26">link 5</a> </div>

jquery:

var didscroll = false;  $(window).scroll(function() {     didscroll = true; });  setinterval(function() {     if ( didscroll ) {         didscroll = false;         var $el;          //same if else statements         switch (true) {             case (scroll >= 591 && scroll <= 1380):                 $el = $("#menu-item-26 a");                 break;             case (scroll >= 1381 && scroll <= 2545):                 $el = $("#menu-item-22 a");                 break;             case (scroll >= 2546 && scroll <= 2969):                 $el = $("#menu-item-23 a");                 break;             case (scroll >= 2970):                 $el = $("#menu-item-24 a");                 break;             default: //scroll<=590                 $el = $("#menu-item-25 a");         }          //removing blue class links         $('.menu a').removeclass('blue');          //adding blue class matched element         $el.addclass('blue');     } }, 50);

Comments

Post a Comment

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

Bubble Sort Manually a Linked List in Java -

Image
this first question here. trying manually sort linked list of integers in java , can not figure out wrong code. suggestions? don't error, still have output unordered. tried few different ways, nothing worked. appreciate if can me that. public class node { int data; node nextnode; public node(int data) { this.data = data; this.nextnode = null; } public int getdata() { return this.data; } } // node class public class datalinkedlist implements datainterface { private node head; private int size; public datalinkedlist(){ this.head = null; this.size = 0; } public void add(int data) { node node = new node(data); if (head == null) { head = node; } else { node currentnode = head; while(currentnode.nextnode != null) { currentnode = currentnode.nextnode; } currentnode.nextnode = node; ...
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more