导航栏a在某些滚动后更改颜色

时间：2020-05-30 22:05:07

标签： javascript html jquery css

我有一个似乎无法解决的问题。因此，我想做的就是滚动到一定距离（最好滚动到特定的div框）时；导航栏<a>标签在达到其div后应切换颜色（例如红色）。

示例：<a>标签链接到#div。当我向下滚动到该div时，特定的<a>标签应会更改颜色。

    * {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

body {
    width: 100%;
    margin: 0 auto;
}


#logo {
    display: inline;
}

#logoo {
    position: absolute;
    top: 6%;
    left: 2%;
}

.parallax-window {
    width: 100%;
    min-height: 1000px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
}

h1 {
    position: absolute;
    left: 52%;
    top: 45%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 4vw;
    width: 1300px;
    text-transform: uppercase;
}

@media only screen and (max-width:1000px) {
  /* For mobile phones: */
  .nav1, .content, footer {
    width:50%;
  }
}

@media only screen and (max-width:1000px) {
    img, h1, h3 {
        font-size: 4vw;
        width: 90%;
    }
}

.content {
    left: 0;
    position: absolute;
    width: 100%;
    height: 400px;
}

#div {
    margin-top: 62.5rem;
    background-color: #222;
    color: white;
    padding: 20px 20px 5px 80px;
}

h3 {
    font-size: 50px;
    position: absolute;
    top: 0;
}

p {
    margin-top: 150px;
    width: 50%;
    text-align: justify;
}

.me {
    left: 65%;
    position: absolute;
    top: 1.5rem;
}

#me {
    border-radius: 50%;
}

#divv {
    margin-top: 87.5rem;
    background-color: #3b3a3a;
}

ul {
    position: absolute;
    list-style-type: none;
    overflow: hidden;
    background: transparent;
    padding: 0;
    z-index: 1;
    margin-top: 60px;
    left: 38%;
}


li {
    display: inline-block;
    margin: 25px;
}

li a {
    display: block;
    padding: 5px;
    margin: 0 5px;
    text-decoration: none;
}

#hem {
    background-color: #292929;
    position: fixed;
    top: -10rem;
    transition: top 0.3s;
    width: 100%;
    height: 7rem;
    z-index: 1;
}

#hem ul {
    margin-left: 30rem;
}

a span {
    color: white;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
}



footer {
    position: absolute;
    top: 300%;
    left: 0;
    width: 100%;
    margin: 0px;
    padding: 1.25em;
    background-color: #87ceeb;
    color: white;
    font-size: .85em;
}

footer div {
    margin: auto;
    width: 70%;
    text-align: center;
    padding: 1.25em 0px;
}

.footer-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color: #33383b;
    border-radius: 4px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
    margin-right: 3px;
}

#facebook:hover {
    background-color: #3b5998;
    transition: 0.25s linear;
}

#twitter:hover {
    color: #008ad8;
    background-color: white;
    transition: 0.25s linear;
}

#youtube:hover {
    color: #C31A1E;
    transition: 0.25s linear;
}

#instagram:hover {
    background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
}


.left-links {
    margin-right: 10px;
}


footer .name {
    font-size: 1.2rem;
}             

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    </head>
    <body>
        <main>
            <div class="parallax-window" data-parallax="scroll" data-image-src="https://i.pinimg.com/originals/bb/e7/42/bbe742c899cb149fadfc5dba9117311b.jpg">
                <header>
                    <nav class="nav1">
                        <div id="logo">
                            <img id="logoo" src="https://git-scm.com/images/logos/downloads/Git-Logo-White.png" height="100" width="239" />
                        </div>
                        <ul>
                            <li>
                                <a href="#hem">
                                    <span>hem</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>om mig</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>mitt arbete</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="nav2" id="hem">
                        <div class="logo" id="logo">
                            <img id="logoo" src="https://git-scm.com/images/logos/downloads/Git-Logo-White.png" height="100" width="239" />
                        </div>
                        <ul class="ul1">
                            <li>
                                <a href="#hem">
                                    <span>hem</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>om mig</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>mitt arbete</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
                <h1>Välkommen till min hemsida!</h1>
                <div id="div" class="content">
                    <h3>Om mig</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <div class="me">
                        <img id="me" src="me.jpg" width="263" height="350">
                    </div>
                </div>
                <div id="divv" class="content">

                </div>
        </main>
        <footer>
            <div>
                Have a question? Email us at
                <a href="mailto:example@example.com">travel@dandeliontours.com</a>
            </div>
            <div class="footer-icons">
                <a id="facebook" href="#"><i class="fa fa-facebook"></i></a>
                <a id="twitter" href="#"><i class="fa fa-twitter"></i></a>
                <a id="instagram" href="#"><i class="fa fa-instagram"></i></a>
                <a id="youtube" href="#"><i class="fa fa-youtube"></i></a>
            </div>
            <div>
                You'll travel with the wind. <span class="name">Dandelion Tours</span>.
            </div>
        </footer>
        <script>
            window.onscroll = function() {scrollFunction()};

            function scrollFunction() {
                if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
                    document.getElementById("hem").style.top = "0";
                } else {
                    document.getElementById("hem").style.top = "-10rem";
                }
            }
        </script>
    </body>
</html>

P.S：链接的js文件是视差效果滚动。

感谢帮助！

演示：https://jsfiddle.net/xvg26a0e/

1 个答案:

答案 0 :(得分：0)

我知道这不是解决此问题的最佳方法。如果您有很多链接，只是为了提供解决方案，这将是很多代码。

这个想法是获取触发样式更改的div的偏移量。并聆听您的窗口onscroll事件。每当到达div的开头时，就添加一个预定义的类，并在离开div时将其删除

根据您的情况：

html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
    </head>
    <body>
        <main class="parallax-window" data-parallax="scroll" data-image-src="https://i.pinimg.com/originals/bb/e7/42/bbe742c899cb149fadfc5dba9117311b.jpg">
            <header>
                <nav class="nav1">
                    <ul>
                        <li>
                            <a id="link1">
                                <span>hem</span>
                            </a>
                        </li>
                        <li>
                            <a id="link2">
                                <span>om mig</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span>mitt arbete</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </header>
            <div id="div"></div>
            <div id="divv"></div>
        </main>
    </body>
</html>

CSS：

.newClass>span{
  color: red;
}

js：

let div = document.getElementById("div");
let divv = document.getElementById("divv");

let link1 = document.getElementById("link1");
let link2 = document.getElementById("link2");

//getting offset
let divOffset = div.offsetTop;
let divvOffset = divv.offsetTop;

//setting the class when it enters the range 
window.onscroll = ()=>{
if (window.pageYOffset >= divOffset && window.pageYOffset <= divvOffset) {
    link1.classList.add("newClass")
  } else {
    link1.classList.remove("newClass");
  }
 if (window.pageYOffset >= divvOffset) {
    link2.classList.add("newClass")
  } else {
    link2.classList.remove("newClass");
  }
}

ps：这不是完美的解决方案，您可以使用JQuery轻松完成此任务。您可以检查此链接以使用该https://codepen.io/latifur/pen/qLKXpj。

希望对您有帮助

相关问题
最新问题