How can I specify a different scrollTop value for one scrollspy location?

I have script which indicates the current position in a menu and sets an active class on it. But I need specific rules for id contact_form. I need to add 1000px to the scrollTop value for that ID location.

Here is my code:

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var item = $($(this).attr("href"));

      if (item.length) { return item; }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var fromTop = $(this).scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     if ($(this).offset().top < fromTop)

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

edited Nov 19 '18 at 18:12

asked Nov 19 '18 at 17:42

Paul Done

205

add a comment |

Here is my code:

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var item = $($(this).attr("href"));

      if (item.length) { return item; }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var fromTop = $(this).scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     if ($(this).offset().top < fromTop)

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

edited Nov 19 '18 at 18:12

asked Nov 19 '18 at 17:42

Paul Done

205

add a comment |

Here is my code:

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var item = $($(this).attr("href"));

      if (item.length) { return item; }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var fromTop = $(this).scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     if ($(this).offset().top < fromTop)

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

edited Nov 19 '18 at 18:12

asked Nov 19 '18 at 17:42

Paul Done

205

Here is my code:

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var item = $($(this).attr("href"));

      if (item.length) { return item; }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var fromTop = $(this).scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     if ($(this).offset().top < fromTop)

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

javascript jquery html web

edited Nov 19 '18 at 18:12

asked Nov 19 '18 at 17:42

Paul Done

205

edited Nov 19 '18 at 18:12

asked Nov 19 '18 at 17:42

Paul Done

205

edited Nov 19 '18 at 18:12

asked Nov 19 '18 at 17:42

Paul Done

205

asked Nov 19 '18 at 17:42

Paul Done

205

asked Nov 19 '18 at 17:42

Paul Done

205

add a comment |

1 Answer
1

active

oldest

votes

I would use jQuery's data method to embed the desired extra pixels into your HTML element. You can see this idea working in this fiddle or in the snippet below.

You could use this idea to control the point at which any element is considered "active", not just the contact form.

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380025%2fhow-can-i-specify-a-different-scrolltop-value-for-one-scrollspy-location%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I would use jQuery's data method to embed the desired extra pixels into your HTML element. You can see this idea working in this fiddle or in the snippet below.

You could use this idea to control the point at which any element is considered "active", not just the contact form.

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

add a comment |

I would use jQuery's data method to embed the desired extra pixels into your HTML element. You can see this idea working in this fiddle or in the snippet below.

You could use this idea to control the point at which any element is considered "active", not just the contact form.

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

add a comment |

I would use jQuery's data method to embed the desired extra pixels into your HTML element. You can see this idea working in this fiddle or in the snippet below.

You could use this idea to control the point at which any element is considered "active", not just the contact form.

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

I would use jQuery's data method to embed the desired extra pixels into your HTML element. You can see this idea working in this fiddle or in the snippet below.

You could use this idea to control the point at which any element is considered "active", not just the contact form.

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

var lastId,

    topMenu = $(".nav"),

    topMenuHeight = topMenu.outerHeight()+15,

    menuItems = topMenu.find("a"),

    scrollItems = menuItems.map(function(){

      var id = $(this).attr("href");

      var item = $(id);

      if (item.length) {

        if (id === "#contact_form") { // Here we embed the desired extra fromTop value

          item.data("extraTop", 1000);

        }

        return item;

      }

    });

menuItems.click(function(e){

  var href = $(this).attr("href"),

      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight-80+1;

  $('html, body').stop().animate({

      scrollTop: offsetTop

  }, 300);

  e.preventDefault();

});

$(window).scroll(function(){

   var $window = $(this);

   var fromTop = $window.scrollTop()+topMenuHeight+80;

   var cur = scrollItems.map(function(){

     var $el = $(this);

     var top = $el.offset().top;

     var extra = $el.data("extraTop"); // Here we read the "extraTop" data attribute

     if (!extra) // If this doesn't exist, we force it to be numeric 0

       extra = 0;

     if (top < fromTop + extra) // Now we compare to the old fromTop plus our extra top value

       return this;

   });

   cur = cur[cur.length-1];

   var id = cur && cur.length ? cur[0].id : "";



   if (lastId !== id) {

       lastId = id;

       menuItems

         .parent().removeClass("active")

         .end().filter("[href='#"+id+"']").parent().addClass("active");

   }

});

.active {

  background: black;

  color: white;

}



div {

  height: 1300px;

}



.nav {

  position: fixed;

  top: 0;

  height: auto;

}



.red {

  background: #ff2a2a;

}



.green {

  background: #33a033;

}



.blue {

  background: #0080ff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">

  <li><a href="#stuff1">Stuff</a></li>

  <li><a href="#stuff2">Stuff</a></li>

  <li><a href="#stuff3">Stuff</a></li>

  <li><a href="#contact_form">Contact Form</a></li>

  <li><a href="#stuff4">Stuff</a></li>

  <li><a href="#stuff5">Stuff</a></li>

  <li><a href="#other">Other</a></li>

</ul>

<div id="stuff1" class="red">

Stuff

</div>

<div id="stuff2" class="red">

Stuff

</div>

<div id="stuff3" class="red">

Stuff

</div>

<div id="contact_form" class="green">

The contact: <input type="text" value="what?"/>

</div>

<div id="stuff4" class="red">

Stuff

</div>

<div id="stuff5" class="red">

Stuff

</div>

<div id="other" class="blue">

Other

</div>

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

answered Nov 19 '18 at 18:29

Austin Mullins

6,16022543

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky