在查看另一个元素时更改一个元素的CSS

问题描述

我正在创建一个带有一侧索引的网页，并带有指向页面上每个相关部分的链接。

在加载页面时，索引列表上的第一个点被突出显示（不同颜色），当用户手动向下滚动到另一部分时，我希望索引列表上的对应点随后被突出显示。

所以我有一个CSS属性，以突出显示索引点，并且该属性最初设置为列表中的第一个点。

如何从一个元素中获取此CSS属性，并将其分配给另一个元素？

.current {
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
  }

这是应用于应突出显示的元素的CSS。当前，索引中的第一个元素总是高亮显示，但是，当然，我需要在用户向下滚动页面时对其进行更改。

让我知道是否需要更多信息。

解决方法

Intersection Observer API是可能的。

使用jQuery的示例代码：

$(window).scroll(function() {
  var scrollDistance = $(window).scrollTop();
  var threshold=250; //in px
  $('section').each(function(i) //list of sections tag to loop
  {
      if ($(this).position().top-threshold <= scrollDistance && i<4) {
          $('.nav-menu li.menu-active').removeClass('menu-active');
          $('.nav-menu li').eq(i).addClass('menu-active');
      }
  });
}).scroll();

您可以使用onScroll事件来使用户滚动时触发功能。然后可以使用scrollTop来获取位置。

retailer

这是纯JS完成的，使用jQuery会更好

请看这个小提琴。 https://jsfiddle.net/cse_tushar/Dxtyu/141/

HTML：-

    <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>

CSS：-

    body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0,1);
    position: fixed;
    background-color:rgba(4,180,49,0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255,255,0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 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;
}
a {
    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%;
}

jQuery：-

 $(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");
        }
    });
}

请仅将活动班级添加到当前按钮（突出显示）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class,and buttons on mouse-over */
.active,.btn:hover {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
  
<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click",function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active","");
  this.className += " active";
  });
}
</script>

</body>
</html>

css-animations html javascript