个人中心
gpt4 book ai didi

javascript - 代码适用于 codepen 和 jsfiddle

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

我的标题仅在向上滚动时才显示的代码仅适用于 jsfiddle或 codepen .我把代码写在我的程序里，打开文件就不行了。我将所有代码粘贴到 codepen 和 jsfiddle 中，它起作用了。我错过了什么，或者哪里出了问题？

HTML 

       <body>
        <header class="nav-down">
            <h1>William Chen</h1>

        </header>
        <section class="module parallax parallax-1">
  <div class="container">
    <h1>Hi.</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2 class="about">Lorem Ipsum Dolor hello</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>What I can do.</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2 class="about">Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <h2 class="about">Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>I can help.</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2 class="about">Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <div class="contact">
            <a  class="contact" href="mailto:williamjchenca@gmail.com?Subject=Website%20Visitor" target="_blank"><i class="fa fa-envelope-o icon">`</i>Message Me</a>
        </div>


  </div>
</section>


        <script src="Scripts/menu.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    </body>

CSS

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Quicksand');


header {
    background: #f5b335;
    height: 80px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up {
    top: -80px;
}

body, html {
    margin: 0;
    padding: 0;

}
video.home {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

div.vid {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
footer {
    background: #222020;
    height: 50px;
    position: fixed;
    bottom: 0;
    margin-bottom: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    width: 99%;
}

p.copyright{
    color: white;
    text-transform: uppercase;
    font-size: 15px;
    font-family:  'Roboto', sans-serif;

}

div.footer{
    float: left;
    margin-left: 2em;
}

h1 {
    text-align: center;
    font-family: 'Fjalla One', sans-serif;
    color: #666666;
}



p {
    color: black;
    font-family: 'Oswald', sans-serif;
}

a.contact {
    text-decoration: none;
    color: white;
    background-color: #36a2dc;
    padding: 20px;
    padding-left: 10px;
    border-radius: 5%;
    cursor: pointer;
    outline: none;
    height: 100px;
    width: 200px;
    font-family: 'Quicksand', sans-serif;
}

i.icon {
    padding: 8px;
}

=========================================================== */
.container {
  max-width: 960px;
  margin: 0 auto;
}
/* ============================================================
  SECTIONS
============================================================ */
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("Images/Image1.jpg");
}
section.module.parallax-2 {
  background-image: url("Images/Image2.jpg");
}
section.module.parallax-3 {
  background-image: url("Images/Image3.jpeg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}

JS

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

P.S 我已经将我所有的代码复制并粘贴到我自己的文档中，多次放入 codepen 和 js fiddle 中，以确保它们是正确的。(这与我的 html、css、js 文档中的代码相同。减去头。)

最佳答案

看起来您可能在初始化 jQuery 之前添加了 $(window).scroll 监听器。您还尝试在 jQuery 初始化之前将 navbarHeight 设置为基于 jQuery 的值。尝试在 jQuery onReady 监听器中包装任何依赖 jQuery 的内容:

// Hide Header on on scroll down
var didScroll, navbarHeight;
var lastScrollTop = 0;
var delta = 5;

$().ready(function(){
  navbarHeight = $('header').outerHeight();

  $(window).scroll(function(event){
    didScroll = true;
  });
})

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

这将确保在 jQuery 初始化之后添加滚动监听器。

关于javascript - 代码适用于 codepen 和 jsfiddle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42059182/

25 4 0
文章推荐： javascript - 更改背景颜色和文本，逻辑是否存在但脚本不起作用？
文章推荐： java - Flink DataStream API 中 TimeWindow.getStart() 的问题
文章推荐： css - Font Awesome instagram 图标不可见
文章推荐： java - maven工具中插件和依赖的区别(解压jar)
太空宇宙
个人简介

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

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