jQuery

Question

当我的粘性菜单项在视口中滚动到它们各自的锚点时，我很难思考如何使它们各自具有自己的背景颜色。

这里是 JSfiddle：https://jsfiddle.net/ym88etuk/6/ -- 现在可以按我想要的方式工作，但我仍然可以使用帮助来使这个 DRY 友好。

HTML:

<ul class="sticky">
  <a href=#part1 class="scroll">
    <li>part1</li>
  </a>
  <a href=#part2 class="scroll">
    <li>part2</li>
  </a>
  <a href=#part3 class="scroll">
    <li>part3</li>
  </a>
  <a href=#part4 class="scroll">
    <li>part4</li>
  </a>
</ul>
<div class=content>
  <div id=part1 class="section gray">
  </div>
  <div id=part2 class="section green">
  </div>
  <div id=part3 class="section gray">
  </div>
  <div id=part4 class="section green">
  </div>
  <div class=extraspace>
  </div>
  </div>
</div>

CSS:

.sticky{
  position: fixed;
  top:0px;
  width:100%;
  z-index:999;
  background: white;
  margin:0;
}
.content{
  position:relative;
  top: 28px;
  width:100%;
}
ul{
  list-style-type:none;
}
li{
  float: left;
  width 20%;
  padding:2.5%;
}
.section{
  height:300px;
}
.gray{
  background-color:gray;
}
.green{
  background-color:green;
}
.clearfix:after {
    content: " "; 
    display: table; 
    clear: both; 
}
.extraspace{
  height: 400px;
}

jQuery/Javascript:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html, body').animate({
      scrollTop:($(this.hash).offset().top) - 32}, 500);
    });
});


$(window).scroll(function(){
// I've removed my work here, because it was very broken... and not pertinent to solving the issue.
}

Answer 1

你需要的是jQuery.scrollfire

正在工作 demo here。

1.导入 jQuery.scroll 脚本

<script src="path/to/jQuery.scrollfire.js"></script>

2。更新你的 html

<ul class="sticky">
<!-- add id for each anchor -->
  <a href=#part1 class="scroll" id="anchor1">
    <li>part1</li>
  </a>
  <a href=#part2 class="scroll" id="anchor2">
    <li>part2</li>
  </a>
  <a href=#part3 class="scroll" id="anchor3">
    <li>part3</li>
  </a>
  <a href=#part4 class="scroll" id="anchor4">
    <li>part4</li>
  </a>
</ul>
<!-- add target anchor -->
<div class=content>
<div id=part1 class="section gray" data-anchor="anchor1">
</div>
<div id=part2 class="section green" data-anchor="anchor2">
</div>
<div id=part3 class="section gray" data-anchor="anchor3">
</div>
<div id=part4 class="section green" data-anchor="anchor4">
</div>
<div class=extraspace>
</div>
</div>
</div>

3。更新你的脚本

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html, body').animate({
      scrollTop:($(this.hash).offset().top) - 32}, 500);
    });

  //bind section scrollfire event
  $(".section").scrollfire({
    topOffset: 64,
    onTopOut:function(elm, distance){
      var className = $(elm).hasClass('gray') ? 'gray' : 'green';
        $('.scroll > li' ).removeClass('gray green');
      $('#'+$(elm).data('anchor')+' > li').addClass(className);
      console.info($(elm).attr('id') + 'top out');
    },
    onTopIn:function(elm, distance){
        var className = $(elm).hasClass('gray') ? 'gray' : 'green';
        $('.scroll > li ').removeClass('gray green');
      $('#'+$(elm).data('anchor')+' > li').addClass(className);
      console.info($(elm).attr('id') + 'top in');
    }
  });
});

Answer 2

您可以通过获取 div 背景并将其设置为 li 背景来实现...请检查 https://jsfiddle.net/RRR0308/ym88etuk/10/

HTML

<ul class="sticky">

  <li>
    <a href=#part1 class="scroll">
      part1
    </a>
  </li>
     <li>
    <a href=#part2 class="scroll">
      part2
    </a>
  </li>
   <li>
    <a href=#part3 class="scroll">
      part3
    </a>
  </li>
   <li>
    <a href=#part4 class="scroll">
      part4
    </a>
  </li>
</ul>

<div class=content>
  <div id=part1 class="section gray">
  </div>

     <div id=part2 class="section green">
    </div>

  <div id=part3 class="section red">
  </div>

  <div id=part4 class="section yellow">
  </div>

  <div class=extraspace>
  </div>
</div>

CSS

.sticky{
  position: fixed;
  top:0px;
  width:100%;
  z-index:999;
  background: white;
  margin:0;
}
.content{
  position:relative;
  top: 28px;
  width:100%;
}
ul{
  list-style-type:none;
}
li{
  float: left;
  width 20%;
  padding:2.5%;
}
.section{
  height:300px;
}
.gray{
  background-color:gray;
}
.green{
  background-color:green;
}
.red{
  background-color:red;
}
.yellow{
  background-color:yellow;
}
.clearfix:after {
    content: " "; 
    display: table; 
    clear: both; 
}
.extraspace{
  height: 400px;
}



li{
  cursor:pointer;
}

jQuery

    //smooth scroll
jQuery(document).ready(function($) {
    $("li").click(function(event){

        event.preventDefault();
    event.stopPropagation();
    t= $(this).find('a').attr('href');
    var bg=$(document).find(''+t).css('background-color');

    $('li').removeClass('highlight').css('background-color', '#fff');

    $(this).css('background-color',bg);
        $('html, body').animate({

      scrollTop:($(t).offset().top) - 32}, 500);

   console.log(bg);
    });

});

Answer 3

我有一个答案，尽管我仍在努力使它适合 DRY 编程技术：

我更新了 JSfiddle 以反映这些变化 https://jsfiddle.net/ym88etuk/36/

HTML:

<ul class="sticky">
  <a href=#part1 class="scroll">
    <li>part1</li>
  </a>
  <a href=#part2 class="scroll">
    <li>part2</li>
  </a>
  <a href=#part3 class="scroll">
    <li>part3</li>
  </a>
  <a href=#part4 class="scroll">
    <li>part4</li>
  </a>
</ul>
<div class=content>
<div id=part1 class="section gray">
</div>
<div id=part2 class="section green">
</div>
<div id=part3 class="section gray">
</div>
<div id=part4 class="section green">
</div>
<div class=extraspace>
</div>
</div>
</div>

CSS:

.sticky{
  position: fixed;
  top:0px;
  width:100%;
  z-index:999;
  background: white;
  margin:0;
}
.content{
  position:relative;
  top: 28px;
  width:100%;
}
ul{
  list-style-type:none;
}
li{
  float: left;
  width 20%;
  padding:2.5%;
}
.section{
  height:300px;
}
.gray{
  background-color:gray;
}
.green{
  background-color:green;
}
.blue{
  background-color:blue;
  color: #fff;
}
.orange{
  background-color:orange;
  color: #fff;
}
.pink{
  background-color:pink;
  color: #fff;
}
.purple{
  background-color:purple;
  color: #fff;
}
.clearfix:after {
    content: " "; 
    display: table; 
    clear: both; 
}
.extraspace{
  height: 400px;
}

jQuery:

//smooth scroll
jQuery(document).ready(function($) {
var greenback = 
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html, body').animate({
      scrollTop:($(this.hash).offset().top) - 32}, 500);
    });
});

//Navbar Functions
$(document).ready(function() {
  var pos1 = $("#part1").position(); 
  var pos2 = $("#part2").position(); 
  var pos3 = $("#part3").position(); 
  var pos4 = $("#part4").position(); 
  $(window).scroll(function(){
    var windowpos = $(window).scrollTop();
    part1li = $("li", 'a[href="#part1"]');
    part2li = $("li", 'a[href="#part2"]');
    part3li = $("li", 'a[href="#part3"]');
    part4li = $("li", 'a[href="#part4"]');
    if (windowpos >= pos1.top && windowpos < pos2.top) {
            part1li.addClass('blue');
        } else {
            part1li.removeClass('blue');
        }
            if (windowpos >= pos2.top && windowpos < pos3.top) {
            part2li.addClass('orange');
        } else {
            part2li.removeClass('orange');
        }
            if (windowpos >= pos3.top && windowpos < pos4.top) {
            part3li.addClass('pink');
        } else {
            part3li.removeClass('pink');
        }
            if (windowpos >= pos4.top) {
            part4li.addClass('purple');
        } else {
            part4li.removeClass('purple');
        }
      });
    });

jQuery - 在粘性菜单中激活时每个项目的不同背景颜色

jQuery - A different background color for each item when active in a sticky menu

sticky