Question

当我滚动到页面中的某个点时，我想知道如何更改我的徽标。

以下是网站http://jsfiddle.net/zackreid/no7e4yng/

的jsfiddle

我觉得它将与JavaScript有关。

我要求这样做的原因是当您滚动到某个点时，徽标会与背景融为一体。您所看到的实际上不是徽标/背景，而只是链接断开时的占位符。

您仍然可以找到刚刚评论过的div的原始名称。

CSS- / *这会重置所有样式* /

* {
    hight: 100%;
    margin: 0;
    padding: 0;
}


/*layout*/

p {
    line-height: 1.2em;
    margin-bottom: 10px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    color: ;
    font-size: 55px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h2 {
    color: ;
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h3 {
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    margin: 5px 0;
    padding: 20px;
    position: inherit;
    text-align: center;
    z-index: 1;
}

/*boards*/

#board_1, #board_2, #boar_3, #board_4 {
    width: 100%;
}

.board_1 {
    background: url(../img/background_5.png);
    background-image: min-height: 750px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 1020px;
    margin: 0 auto;
}

.p 

{
    color: white;
    font-size: 3em;
    max-width: 600px;
    padding-left: 55%;
    padding-top: 28%;
}

.logo
{
 position: fixed;
 margin-top: -3px;
}

.nav

{
    width: 100%; 
    height: 85px;
    background-color: black;
     opacity: 0.7;
    position: fixed;
    margin-top: 0px; 
}

.ul
{
  color: white;
  font-size: 1.5em;
  float: right;
  padding-top: 30px;
  padding-right: 40px;
  text-decoration: none;

}

 nav ul li
            {
             display: inline;
             margin: 10px;

            }


a:link {
    color: white;
    text-decoration: none;

}

a:hover {
    color: white;
    opacity: 0.7;
}

a:visited {
    color: white;
}

.board_2 {
    background-color: white;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

.about
{
 font-size: 5em;
 padding-top: 7%;
 padding-left: 40%;
}

.hi
{
 width: 500px;
 font-size: 2em;  
 padding-top: 5%;
 padding-left: 60%;
}

.passion
{
 width: 500px;
 font-size: 2em;
 padding-top: 5%;
 padding-left: 60%;
}

.board_3 {
    background-color: white;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

.work
{
 font-size: 5em;
 padding-top: 7%;
 padding-right: 70%;   
}

.selection
{
 width: 500px;
 font-size: 2em;
 padding-top: 10%;
 padding-left: 10%;
}


.container 
{
  overflow-y: auto;
  padding-left: 40%;
  margin-top: -16%;
}
.container > div 
{
  margin: 30px;
  width: 200px;
  height: 200px;
  background: blue;
  float: left;
  color: #fff;
  text-align: center;
}

.board_4 {
    background-color: black;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 400px;
}

.contact
{
 color: white;
 padding-top: 4%;
}

.social a {
  opacity: 0.3;
  transition: opacity .25s ease-in-out;

}

.social a:hover {
  opacity: 0.8;
}

.social li {
  display: inline;
  margin: 2px;
  color: #444;
}

HTML -

<!DOCTYPE html>
<html>
<head>


    <link rel="stylesheet" href="css/main.css">


</head>

<body>
    <!--artical starts here-->

        <!--header which holds the nav and title-->

        <div class="board_1">

            <header id="main_header">


                <div class="content">



                    <nav class="nav">



                        <ul class="ul">
                            <li><a href="#board_1" title="Home">Home</a></li>
                            <li><a href="#board_2" title="About">About</a></li>
                            <li><a href="#board_3" title="Work">Work</a></li>
                            <li><a href="#board_4" title="Contact">Contact</a></li>
                        </ul>

                    </nav>

                </div>

                <div class="logo">
<img src="../img/logo_wb_1.png"></a>
                </div>
            </header>  

            <div class="p">
                <p>Hi, thats me over there. This is a my home well my Internet home, it has everything you want to know about me.</p>
            </div>


            <!--header ends-->
            </div>



            <div class="board_2">
                <h2 class="about"> About</h2>




                <p class="hi">Hi, my name is Zack Reid. I am in first year currently studying Interaction Design at The University Of Ulsture.</p>

                <p class="passion">I have a passion for many things which are design, music, drawing, typography, writing, photography, meditation and running. I hope that some day I will be able to say that my work has inspired someone and if I can do that, I will be a happy man.</p>

            </div>

            <div class="board_3">

                <h2 class="work">Work</h2>
                <p class="selection">Here is a selection of work I have done for my course and some I have done in my own time.</p>

 <div class="container">
   <div>Box1</div>
   <div>Box2</div>
   <div>Box3</div>
   <div>Box4</div>
   <div>Box5</div>
   <div>Box6</div>
   <div>Box7</div>
   <div>Box8</div>
</div>

            </div>

            <div class="board_4">

                <h2 class="contact">You can contact me below, if you have any questions.</h2>

                <div class="social">
        <ul>
            <li><a href="https://www.flickr.com/photos/117329603@N05/"><img src="" alt="Follow me on Flickr" /></a></li>
            <li><a href="#"><img src="images/social-icons/github.svg" alt="Follow me on GitHub" /></a></li>
            <li><a href="https://twitter.com/MrZackrox"><img src="images/social-icons/twitter.svg" alt="Follow me on Twitter" /></a></li>
            <li><a href="#"><img src="images/social-icons/link.svg" alt="View my website" /></a></li>
            <li><a href="#"><img src="images/social-icons/pinterest.svg" alt="Follow me on Pinterest" /></a></li>
            <li><a href="#"><img src="images/social-icons/vimeo.svg" alt="Subscribe to my channel on Vimeo" /></a></li>
        </ul>
    </div>

            </div>
</body>
</html>

Answer 1

您可以使用jquery来观看滚动位置。

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
  var board_position = $('.board_2').offset().top;
  var logo = $('.logo');

  $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        if (scroll >= board_position) {
            logo.addClass('logo-highlight');
        } else {
            logo.removeClass('logo-highlight');
        }
  });
</script>

在你的CSS中

.logo-highlight {
    color: #000 !important;
}

Answer 2

您需要监控页面的滚动位置，并在需要时触发一些JS。

你可以推出自己的版本，或者如果你乐意使用jQuery，那么你可以使用WayPoint插件或ScrollSpy插件。

如果您使用Google搜索这些关键字，您很可能会找到类似

的内容

https://github.com/sxalexander/jquery-scrollspy

http://imakewebthings.com/waypoints/

这些插件将提供javascript回调，允许您在遇到航点时运行代码，您的代码将类似于jquery

$（”标志。 '）addClass（' 倒颜色）;

然后有一个css类，它具有你想要应用的新颜色。

在滚动时更改元素的位置

2 个答案: