个人中心
gpt4 book ai didi

javascript - 改变滚动时元素的位置

转载 作者：太空宇宙 更新时间：2023-11-04 12:30:31 24 4
gpt4 key购买 nike

我想知道如何在您滚动到页面中的某个点时更改我的 Logo 。

这是网站 http://jsfiddle.net/zackreid/no7e4yng/ 的 jsfiddle

我有一种感觉，它会与 JavaScript 有关。

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

你仍然可以找到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>

最佳答案

您可以使用 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;
}

关于javascript - 改变滚动时元素的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27692887/

24 4 0
文章推荐： javascript - 如何跨网站保存 CSS 样式切换
文章推荐： linux - 如何在 Linux 中从命令行杀死一个进程及其所有线程？
文章推荐： c++ - 如何实时捕捉摄像头的视频？
文章推荐： html - 修复菜单展开时滚动内容的问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com