时间戳

首页 > 解决方案 > 如何在 html 中调用导航包装器上的 stickynavbar 函数？

javascript - 如何在 html 中调用导航包装器上的 stickynavbar 函数？

问题描述

我在一个网站上工作，我决定最终使用 jquery，但是没有 js 技能，我有点卡住了。我不知道如何在导航包装、nav 标签或 ul 标签上调用 stickyNavbar 函数。这是代码：

$(function () {
    $('.header').stickyNavbar({
    activeClass: "active",          // Class to be added to highlight nav elements
    sectionSelector: "scrollto",    // Class of the section that is interconnected with nav links
    animDuration: 250,              // Duration of jQuery animation
    startAt: 0,                     // Stick the menu at XXXpx from the top of the this() (nav container)
    easing: "linear",               // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
    animateCSS: true,               // AnimateCSS effect on/off
    animateCSSRepeat: false,        // Repeat animation everytime user scrolls
    cssAnimation: "fadeInDown",     // AnimateCSS class that will be added to selector
    jqueryEffects: false,           // jQuery animation on/off
    jqueryAnim: "slideDown",        // jQuery animation type: fadeIn, show or slideDown
    selector: "a",                  // Selector to which activeClass will be added, either "a" or "li"
    mobile: false,                  // If false nav will not stick under 480px width of window
    mobileWidth: 480,               // The viewport width (without scrollbar) under which stickyNavbar will not be applied (due usability on mobile devices)
    zindex: 9999,                   // The zindex value to apply to the element: default 9999, other option is "auto"
    stickyModeClass: "sticky",      // Class that will be applied to 'this' in sticky mode
    unstickyModeClass: "unsticky"   // Class that will be applied to 'this' in non-sticky mode
  });
});
而且我现在不知道将它放在我的代码中的哪个位置。

<!DOCTYPE html>
<html>
    
    <head>
        
    <title>Sunny Bistro</title>
   
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">

        
    <meta charset="UTF-8">
 
            
        
        
        <link rel="stylesheet" type="text/css" href="CSS/Base%20CSS.css"> 
      
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
    
        <script src="jquery-3.3.1.min.js"></script>
        
   
    </head>
    
 

   
    
    
    <body>
 
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
        
        <script>var _nearplace=_nearplace||{};_nearplace.organization='0615ec61-9279-49ee-9d05-b021594eef39';_nearplace.widget='d2b48791-d4a8-439c-8a2f-c59d214275a3';window.nearplace||function(){var s=document.createElement('script');s.type='text/javascript';s.async=!0;s.src='https://widget.nearplace.com/loader.js';document.addEventListener("DOMContentLoaded",function(){(document.scripts[0]||document.head).appendChild(s)})}();</script>

<div id="header" class="header">
   <nav id="nav">
       <ul class="nav navbar-nav">
           <li>
             <a href="#home">Home</a>
           </li>
           <li>
             <a href="#about">About</a>
           </li>
           <li>
             <a href="#services">Services</a>
           </li>
           <li>
             <a href="#contact">Contact</a>
           </li>
       </ul>
   </nav>
</div>
        
 
        
           <section id="bottle">
        <article>
        <h6><img src="CSS/Images/SunnyBistro-8.png" ></h6>
        <h1>The Sunny Bistro</h1>   
        <h2>The sunny bistro</h2>   
        </article>
        <div class="parallax" data-velocity="-.3"></div>
    </section>
    <section id="story-freext">
        <article>
        
        </article>
        <div class="parallax" data-velocity="-.1"></div>
        <div class="parallax" data-velocity="-.5" data-fit="525"></div>
    </section>
    <section></section>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../jquery.scrolly.js"></script>
<script>
    $(document).ready(function(){
       $('.parallax').scrolly({bgParallax: true});
    });
</script>


    </body>


</html>
我对此很陌生，所以提前感谢:) 我的导航栏应该是这样的：1 但它看起来像这样：2

标签： javascriptjqueryhtmlcss

解决方案

首先，您需要清理您的 HTML。你有这么多你不需要的代码。

首先，在</body>. 我已经删除了你<head>和<body>import jQuery 的行，因为你不需要这些。

对于您的功能stickynavbar，在哪里找到了该功能？

<!DOCTYPE html>
<html>
<head>
    <title>Sunny Bistro</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="CSS/Base%20CSS.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="header">
        <nav id="nav">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#services">Services</a>
                </li>
                <li>
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </nav>
    </div>



    <section id="bottle">
        <article>
            <h6><img src="CSS/Images/SunnyBistro-8.png"></h6>
            <h1>The Sunny Bistro</h1>
            <h2>The sunny bistro</h2>
        </article>
        <div class="parallax" data-velocity="-.3"></div>
    </section>
    <section id="story-freext">
        <article>

        </article>
        <div class="parallax" data-velocity="-.1"></div>
        <div class="parallax" data-velocity="-.5" data-fit="525"></div>
    </section>
    <section></section>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script>
    $(document).ready(function () {
        $('.header').stickyNavbar();
    })
</script>
</body>

</html>

推荐阅读