个人中心
gpt4 book ai didi

html - 单击菜单栏时滚动页面视差？

转载 作者：行者123 更新时间：2023-11-28 06:25:38 25 4
gpt4 key购买 nike

我的问题与这个问题有关parallax menu scrolling

我也在尝试同样的事情。

但是，由于某些问题，它无法正常工作。我想我选错了 id 和 class。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SNAPCHAT</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
     <script src="js/jquery.stellar.js"></script>
    <script src="js/scrip.js"></script>
    <script src="js/jquery.nicescroll.js"></script>


</head>
<body>
<a id="#nav1"></a>
<a id="#nav2"></a>
<a id="#nav3"></a>
<a id="#nav4"></a>

<a href="#" class="back-to-top">Back to Top</a>
   <div id="nav">
    <!-- <div id="logo"><img src=""></div>  -->   

        <ul>
            <li><a href="http://mediacentral.ie/" class="nav-icon" title="Home">Home</span></a></li>    
            <li><a href="#nav1">Sponsored Snapchat</a></li>
            <li><a href="#nav2">Snapchat Content</a></li>
            <li><a href="#nav3">Display Ads</a></li>
            <li><a href="#nav4">Media Central</a></li>
        </ul>


</div id="main">

    <div id="#nav1" class="image" data-stellar-background-ratio="0.5" >
<!--    <div id="content_1" class="content1">
 -->       


    </div>


    </div>
    </div>


    <div id="#nav2" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content2">
 -->        

    </div>

    <div id="#nav3" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content3">
 -->        



    </div>

    <div id="#nav4" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content4">
 -->        



    </div>

<script type="text/javascript">
// create the back to top button
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');

var amountScrolled = 300;

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('a.back-to-top').fadeIn('slow');
    } else {
        $('a.back-to-top').fadeOut('slow');
    }
});

$('a.back-to-top, a.simple-back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});
</script>
</body>
</html>

这是我的CSS

    body{
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 100%;    
    background-color: #fffc00;
}
.image {
    height: 750px;
    width: 100%;
    /*background: #55e6c5;*/
    }

.content {
    height: 750px;
    width:100%;
/*     background: white;*/    
    z-index: 2;
}
.content h1 {
    font-size: 40px;
    color: #464646;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin: 30px 60px;
}
.content p {
    font-size:20px;
    color: #343434;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 30px 60px;
}

#nav1 {
    background: url(../images/bg1.png);
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px;
    text-align:center;
    width: 100%;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
#nav2 {
    background: url(../images/bg2.png);
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px;
    text-align:center;
    width: 100%;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
#nav3 {
    background: url(../images/bg3.png) ;
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px;
    text-align:center;
  width: 100%;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#nav4 {
    background: url(../Images/bg4.png) ;
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px 80px 0 80px ;
    text-align:center;  
   width: 100%;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
#nav {
    height: 70px;
    width: 100%; 
    position: fixed;
    top:5px;
    left:0;
    background: #00000; 
    z-index: 100;

}

a[id= "#nav1"]:target ~ #main div.image {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[id= "#nav2"]:target ~ #main div.image {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}

a[id= "#nav3"]:target ~ #main div.image {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}

a[id= "#nav4"]:target ~ #main div.image {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}


/*#nav #logo {
    height: 50px;
    width: 50px;
    position: relative;
    top: 0;
    bottom:0;
    margin: auto 100px;
    text-align: left;
}*/

#nav #logo img {
    height: 100%;
    width: 100%;

}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    opacity: 0.6;
  filter: alpha(opacity=60)
}

li {
    float: left;
    padding-left:80px;
}

li a {
    display: inline-block;
    color: #fffc00;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    color: #fff;
}

a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background: #333 url("../images/up-arrow.png") no-repeat center 43%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/*#content_1 {position: relative;}*/

请帮帮我。

这是我的代码 https://jsfiddle.net/vrg9qmp1/

最佳答案

不要在定义 id 属性时使用 #，只有在 href 或 css 选择器中引用它时才使用。并且只在单个元素上使用相同的 id。因此，请删除 body 开头的 a 元素，因为您稍后会使用相同的 ID。

这将不起作用。

<div id="#nav1"> 
<a href="nav1">

这将起作用:

<div id="nav1"> 
<a href="#nav1">

关于html - 单击菜单栏时滚动页面视差？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35315515/

25 4 0
文章推荐： ios - Xcode Swift 3d 快捷方式触摸导航栏不显示
文章推荐： html - 如何在 Bootstrap 中更改单选按钮的颜色和大小？
文章推荐： ios - 仪器:泄漏和分配 (tvOS)
文章推荐： javascript - CSS 和 FORM 工作，但嵌入时不工作
行者123
个人简介

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

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