个人中心
gpt4 book ai didi

javascript - 当我将 Navbar 固定在顶部时，网页不会让我滚动

转载 作者：行者123 更新时间：2023-11-28 02:57:03 24 4
gpt4 key购买 nike

一旦您滚动过 Logo ，我将使用 javascript 将导航栏固定在顶部。出于某种原因(仅在一页上)，当我滚动经过 Logo 时，它不会让我移动并右移回到网页顶部，我不确定出了什么问题。 http://webinnovations.ie/fenuhealthnew/products.php

css 这是滚动到 180px 以下时添加的类

    .fixed {
  position: fixed;
  display:block;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}

html

    <!DOCTYPE html>
<html>
  <head>
    <title>Products - FenuHealth</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="products.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

    <style>
      .twitter-timeline {
        height: 120px !important;
      }

      @media screen and (max-width: 870px) {
        .twitter-timeline {
          height: 400px !important;
        }
      }
    </style>
  </head>

  <body>
    <header>
      <div class="div-center">
        <img style="float: left" id="logo" src="img/test.jpg" />
        <img style="float: left" id="logo" src="img/logo.jpg" />
      </div>
      <nav class="nav-menu">
        <img class="menuButton" src="img/menu.png" alt="button to open menu"/>
        <ul id="menu">
          <li><a href="index.php">Home</a></li>
          <li id="current"><a href="products.php">Products</a></li>
          <li><a href="symptoms.php">Symptoms</a></li>
          <li><a href="awards.php">Awards</a></li>
          <li><a href="testimonials.php">Testimonials</a></li>
          <li><a href="faq.php">FAQ</a></li>
          <li><a href="docs.php">Docs</a></li>
          <li><a href="buy-now.php">Buy Now</a></li>
          <li><a href="contact-us.php">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <div class="container">
      <div class="main">  
        <nav class="nav-products">
          <ul>
            <li style="background-color: rgb(23, 127, 67)" onclick="productData(0)">FenuSave</li>
            <li style="background-color: rgb(195, 38, 47)" onclick="productData(1)">FenuCare</li>
            <li style="background-color: rgb(42, 45, 130)" onclick="productData(2)">FenuFeast</li>
            <li style="background-color: rgb(186, 148, 119)" onclick="productData(3)">FenuCamel</li>
            <li style="background-color: rgb(251, 120, 44)" onclick="productData(4)">FenuJoint</li>
            <li style="background-color: rgb(19, 127, 182)" onclick="productData(5)">FenuCalm</li>
            <li style="background-color: black" onclick="productData(6)">FenuLyte</li>
            <li style="background-color: purple" onclick="productData(7)">FenuFoal</li>
          </ul>
        </nav>
        <div id="product-div">
          <!-- Javascript -->
          <p>There was an error loading the product data</p>
        </div>

        <script>productData(0)</script>
      </div>
      <div class="sidebar">
        <?php include('sidebar.php'); ?>
      </div>
    </div>

    <?php include('footer.php'); ?>
  </body>
</html>

JavaScript

function productData(productId) {
  'use strict';
  console.log("productId: " + productId);
  var products = [
    {"name": "FenuSave", "img": "img/fenusave.jpg", "text": "FenuSave helps to prevent gastric ulcers"},
    {"name": "FenuCare", "img": "img/fenucare.jpg", "text": "FenuCare helps cure gastric ulcers"},
    {"name": "FenuFeast", "img": "img/fenufeast.jpg", "text": "FenuFeast provides a reward or a special treat"},
    {"name": "FenuCamel", "img": "img/fenucamel.jpg", "text": "FenuCamel helps camels race to victory"},
    {"name": "FenuJoint", "img": "img/test.jpg", "text": "FenuJoint is suitable for the older horse"},
    {"name": "FenuCalm", "img": "img/test.jpg", "text": "FenuCalm helps horses relax"},
    {"name": "FenuLyte", "img": "img/test.jpg", "text": "FenuLyte replaces electrolytes after exercise or travel"},
    {"name": "FenuFoal", "img": "img/test.jpg", "text": "FenuFoal is specially formulated for the younger animal"}
  ];

  if (productId < 8 && productId >= 0) {
    document.getElementById("product-div").innerHTML = '<h1 class="text-center">' + products[productId].name + '</h1>';
      if (products[productId].img != "img/test.jpg") {
        document.getElementById("product-div").innerHTML += '\
          <img class="img" style="max-width: 500px" src="' + products[productId].img + '" />\
          <p class="para text-center">' + products[productId].text + '</p>\
        ';
      } else {
        document.getElementById("product-div").innerHTML += '\
          <p class="para text-center" style="margin-top: 30px">' + products[productId].text + '</p>\
        ';
      }
  }
}

j查询

  $(window).bind('scroll', function() {
    if ($(window).scrollTop() > 180) {
        $('nav').addClass('fixed');
    } else {
        $('nav').removeClass('fixed');
    }
  });

最佳答案

在你的JavaScript您添加的代码 fixed类到 <nav> HTML 标签。在所有其他 HTML 页面中，您只有一个 nav每页标记。但是在您提供的 HTML 页面中有两个 nav标签可用。因此 jQuery 将添加 fixed二年级nav元素，因此您看不到原始导航。要解决此问题，您可以更改 nav标记为类似 div 的内容用于第二次导航。正在关注HTML代码不会给您的页面添加任何问题。

<!DOCTYPE html>
<html>
  <head>
    <title>Products - FenuHealth</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="products.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

    <style>
      .twitter-timeline {
        height: 120px !important;
      }

      @media screen and (max-width: 870px) {
        .twitter-timeline {
          height: 400px !important;
        }
      }
    </style>
  </head>

  <body>
    <header>
      <div class="div-center">
        <img style="float: left" id="logo" src="img/test.jpg" />
        <img style="float: left" id="logo" src="img/logo.jpg" />
      </div>
      <nav class="nav-menu">
        <img class="menuButton" src="img/menu.png" alt="button to open menu"/>
        <ul id="menu">
          <li><a href="index.php">Home</a></li>
          <li id="current"><a href="products.php">Products</a></li>
          <li><a href="symptoms.php">Symptoms</a></li>
          <li><a href="awards.php">Awards</a></li>
          <li><a href="testimonials.php">Testimonials</a></li>
          <li><a href="faq.php">FAQ</a></li>
          <li><a href="docs.php">Docs</a></li>
          <li><a href="buy-now.php">Buy Now</a></li>
          <li><a href="contact-us.php">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <div class="container">
      <div class="main">  
        <div class="nav-products">
          <ul>
            <li style="background-color: rgb(23, 127, 67)" onclick="productData(0)">FenuSave</li>
            <li style="background-color: rgb(195, 38, 47)" onclick="productData(1)">FenuCare</li>
            <li style="background-color: rgb(42, 45, 130)" onclick="productData(2)">FenuFeast</li>
            <li style="background-color: rgb(186, 148, 119)" onclick="productData(3)">FenuCamel</li>
            <li style="background-color: rgb(251, 120, 44)" onclick="productData(4)">FenuJoint</li>
            <li style="background-color: rgb(19, 127, 182)" onclick="productData(5)">FenuCalm</li>
            <li style="background-color: black" onclick="productData(6)">FenuLyte</li>
            <li style="background-color: purple" onclick="productData(7)">FenuFoal</li>
          </ul>
        </div>
        <div id="product-div">
          <!-- Javascript -->
          <p>There was an error loading the product data</p>
        </div>

        <script>productData(0)</script>
      </div>
      <div class="sidebar">
        <?php include('sidebar.php'); ?>
      </div>
    </div>

    <?php include('footer.php'); ?>
  </body>
</html>

关于javascript - 当我将 Navbar 固定在顶部时，网页不会让我滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46390904/

24 4 0
文章推荐： javascript - Nodejs - 使电子邮件模板动态化
文章推荐： javascript - 表单提交处理程序未被调用
文章推荐： c++ - 运算符重载在 Visual Studio 2013 中编译但不是 gcc
文章推荐： javascript - 当我清楚地看到页面上存在该元素时，无法确认该元素是否存在
行者123
个人简介

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

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