Question

我很难绕过如何使我的粘性菜单项在各个锚点在视口中滚动到每个时都有自己的背景颜色。

JS在这里：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 - 粘性菜单中活动时每个项目的不同背景颜色

3 个答案: