jquery - Add some px to a "scroll to position" function -


i have fixed header bar works anchor links scroll through page. links header bar gets active if on position. basicially active class comes 75px late, because fixed header 75 px height.

how can add px function compensate that?

$(document).ready(function () {      $(document).on("scroll", onscroll);            //smoothscroll      $('a[href^="#"]').on('click', function (e) {          e.preventdefault();          $(document).off("scroll");                    $('a').each(function () {              $(this).removeclass('active');          })          $(this).addclass('active');                  var target = this.hash,              menu = target;          $target = $(target);          $('html, body').stop().animate({              'scrolltop': $target.offset().top+2          }, 500, 'swing', function () {              window.location.hash = target;              $(document).on("scroll", onscroll);          });      });  });    function onscroll(event){      var scrollpos = $(document).scrolltop();      $('#menu-center a').each(function () {          var currlink = $(this);          var refelement = $(currlink.attr("href"));          if (refelement.position().top <= scrollpos && refelement.position().top + refelement.height() > scrollpos) {              $('#menu-center ul li a').removeclass("active");              currlink.addclass("active");          }          else{              currlink.removeclass("active");          }      });  }
body, html {      margin: 0;      padding: 0;      height: 100%;      width: 100%;  }  .menu {      width: 100%;      height: 75px;      background-color: rgba(0, 0, 0, 1);      position: fixed;      background-color:rgba(4, 180, 49, 0.6);      -webkit-transition: 0.3s ease;      -moz-transition: 0.3s ease;      -o-transition: 0.3s ease;      transition: 0.3s ease;  }  .light-menu {      width: 100%;      height: 75px;      background-color: rgba(255, 255, 255, 1);      position: fixed;      background-color:rgba(4, 180, 49, 0.6);      -webkit-transition: 0.3s ease;      -moz-transition: 0.3s ease;      -o-transition: 0.3s ease;      transition: 0.3s ease;  }  #menu-center {      width: 980px;      height: 75px;      margin: 0 auto;  }  #menu-center ul {      margin: 15px 0 0 0;  }  #menu-center ul li {      list-style: none;      margin: 0 30px 0 0;      display: inline;  }  .active {      font-family:'droid sans', serif;      font-size: 14px;      color: #fff;      text-decoration: none;      line-height: 50px;  }  {      font-family:'droid sans', serif;      font-size: 14px;      color: black;      text-decoration: none;      line-height: 50px;  }  #home {      background-color: grey;      height: 100%;      width: 100%;      overflow: hidden;      background-image: url(images/home-bg2.png);  }  #portfolio {      background-image: url(images/portfolio-bg.png);      height: 100%;      width: 100%;  }  #about {      background-color: blue;      height: 100%;      width: 100%;  }  #contact {      background-color: red;      height: 100%;      width: 100%;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="m1 menu">      <div id="menu-center">          <ul>              <li><a class="active" href="#home">home</a>                </li>              <li><a href="#portfolio">portfolio</a>                </li>              <li><a href="#about">about</a>                </li>              <li><a href="#contact">contact</a>                </li>          </ul>      </div>  </div>  <div id="home"></div>  <div id="portfolio"></div>  <div id="about"></div>  <div id="contact"></div>

if understood correctly guess need compensate following line:

var scrollpos = $(document).scrolltop() + $("#menu-center").height(); //adjusting scrollpos per menu height 

$(document).ready(function() {    $(document).on("scroll", onscroll);      //smoothscroll    $('a[href^="#"]').on('click', function(e) {      e.preventdefault();      $(document).off("scroll");        $('a').each(function() {        $(this).removeclass('active');      })      $(this).addclass('active');        var target = this.hash,        menu = target;      $target = $(target);      $('html, body').stop().animate({        'scrolltop': $target.offset().top + 2      }, 500, 'swing', function() {        window.location.hash = target;        $(document).on("scroll", onscroll);      });    });  });    function onscroll(event) {    var scrollpos = $(document).scrolltop() + $("#menu-center").height(); //adjusting scrollpos per menu height        $('#menu-center a').each(function() {      var currlink = $(this);      var refelement = $(currlink.attr("href"));      if (refelement.position().top <= scrollpos && refelement.position().top + refelement.height() > (scrollpos)) {        $('#menu-center ul li a').removeclass("active");        currlink.addclass("active");      } else {        currlink.removeclass("active");      }    });  }
body,  html {    margin: 0;    padding: 0;    height: 100%;    width: 100%;  }  .menu {    width: 100%;    height: 75px;    background-color: rgba(0, 0, 0, 1);    position: fixed;    background-color: rgba(4, 180, 49, 0.6);    -webkit-transition: 0.3s ease;    -moz-transition: 0.3s ease;    -o-transition: 0.3s ease;    transition: 0.3s ease;  }  .light-menu {    width: 100%;    height: 75px;    background-color: rgba(255, 255, 255, 1);    position: fixed;    background-color: rgba(4, 180, 49, 0.6);    -webkit-transition: 0.3s ease;    -moz-transition: 0.3s ease;    -o-transition: 0.3s ease;    transition: 0.3s ease;  }  #menu-center {    width: 980px;    height: 75px;    margin: 0 auto;  }  #menu-center ul {    margin: 15px 0 0 0;  }  #menu-center ul li {    list-style: none;    margin: 0 30px 0 0;    display: inline;  }  .active {    font-family: 'droid sans', serif;    font-size: 14px;    color: #fff;    text-decoration: none;    line-height: 50px;  }  {    font-family: 'droid sans', serif;    font-size: 14px;    color: black;    text-decoration: none;    line-height: 50px;  }  #home {    background-color: grey;    height: 100%;    width: 100%;    overflow: hidden;    background-image: url(images/home-bg2.png);  }  #portfolio {    background-image: url(images/portfolio-bg.png);    height: 100%;    width: 100%;  }  #about {    background-color: blue;    height: 100%;    width: 100%;  }  #contact {    background-color: red;    height: 100%;    width: 100%;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="m1 menu">    <div id="menu-center">      <ul>        <li><a class="active" href="#home">home</a>          </li>        <li><a href="#portfolio">portfolio</a>          </li>        <li><a href="#about">about</a>          </li>        <li><a href="#contact">contact</a>          </li>      </ul>    </div>  </div>  <div id="home"></div>  <div id="portfolio"></div>  <div id="about"></div>  <div id="contact"></div>


-

Comments

Post a Comment

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more