当特定部分在屏幕上时toggleClass [英] toggleClass when specific section is on screen

问题描述

我正在制作一个大滚动页面.我的导航是固定的.当导航到达我页面上的特定部分时，我想更改导航上的颜色(从黑色到白色，反之亦然).因为有些是白色的，有些是黑色的——我想对比一下.我已经在 css 中创建了一个应该切换的类.但是我在使用我的代码时遇到了困难.看一看:

https://jsfiddle.net/Lp27vuu4/

$(window).scroll(function (event) {var scroll = $(window).scrollTop();$('nav').toggleClass('light-mode',//当div位置匹配或超过时添加'light-mode'类，否则删除'light-mode'类.滚动 >= $('.section2').offset().top);});//触发滚动$(window).scroll();//确保页面刷新时是否在当前位置

body {边距:0px；填充:0px；}导航{宽度:100%；位置:固定；文本对齐:居中；填充顶部:20px；填充底部:20px；}.light-mode {颜色:#fff;}.section1 {宽度:100%；高度:400px；背景色:#fff;颜色:#000；填充:100px；}.section2{宽度:100%；高度:400px；背景色:#000；颜色:#fff;填充:100px；}.section3 {宽度:100%；高度:400px；背景色:#fff;颜色:#000；填充:100px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><导航><h3>导航链接</h3></nav>
第 1 节</节>
第 2 节</节>
第 3 节</section>

结论:

默认情况下，我的导航是深色的.当我到达黑暗的部分时，我想告诉 jQuery 添加 class .light-mode 到

.但是当用户离开该部分时，我希望它恢复正常(因此删除该类).在我的解决方案中它有问题:

1. 当用户不在该部分时，它似乎不会回到原来的状态.
2. 该类仅在用户从顶部滚动到底部页面时添加.它在 .offset().top 上查找.我想让它更专业和通用.我想在每个部分都在屏幕上时添加这个类，无论是从底部还是顶部.

解决方案

你要做的是如果 scroll + 你的 h3 的偏移量大于 section 的偏移量，你要做的就是添加类如果 scroll + h3 的偏移量大于该部分的偏移量 + 它的高度，则将其删除.

看看这个:https://jsfiddle.net/Lp27vuu4/4/>

I am making one big scroll page. And my nav is fixed positioned. I want to change the color (from black to white and vice versa) on the nav when it reaches specific sections on my page. It's because some of them are white, and some of them are dark - I want to make a contrast. I already made a class in css that should be toggled. But I am having difficulties using my code. Take a look at it:

https://jsfiddle.net/Lp27vuu4/

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        $('nav').toggleClass('light-mode',
            //add 'light-mode' class when div position match or exceeds else remove the 'light-mode' class.
            scroll >= $('.section2').offset().top
        );
    });

    //trigger the scroll
    $(window).scroll();//ensure if you're in current position when page is refreshed

body {
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  position: fixed;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.light-mode {
    color: #fff;
}

.section1 {
   width: 100%;
   height: 400px;
   background-color: #fff;
   color: #000;
   padding: 100px;
}

.section2 {
   width: 100%;
   height: 400px;
   background-color: #000;
   color: #fff;
   padding: 100px;
}

.section3 {
   width: 100%;
   height: 400px;
   background-color: #fff;
   color: #000;
   padding: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <h3>navigation links</h3>
</nav>
<section class="section1">
    section 1
</section>
<section class="section2">
    section 2
</section>
<section class="section3">
    section 3
</section>

The conclusion:

My navigation by default is dark colored. When I reach the section that is dark I want to tell jQuery to add class .light-mode to <nav>. But when user goes off the section, I want it to go back to normal (so delete the class). In my solution it has issues:

1. It seems to it is not going back to original when user is not on the section.
2. The class is added just when user scrolls from top to bottom page. It looks on .offset().top. I want to make it more professional and universal. I want to add this class when each section is on screen not matter if its from bottom or top.

解决方案

What you want to do is to add the class if scroll + the offset of your h3 is greater than the offset of the section and remove it if scroll + the offset of your h3 is greater than the offset of the section + it's height.

Check out this: https://jsfiddle.net/Lp27vuu4/4/

这篇关于当特定部分在屏幕上时toggleClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！