粘性导航栏不再起作用,js 问题

时间:2021-06-30 19:59:10

标签: javascript jquery css

sticky-header-navbar 不粘导航栏。为什么我的 js 代码段不起作用?通常,向下滚动栏时,它会粘在导航栏上,但现在,它不起作用。我解决不了如果您需要更多信息,请写信给我提供。希望你能好好解决

直播网站:https://cutt.ly/6mssN3l

(function ($, root, undefined) {
    
    $(function () {
        
        'use strict';
        
        // DOM ready, take it away
        window.onscroll = function() {myFunction()};

        var header = document.getElementById("sticky-header-navbar");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                // header.classList.add("sticky-header-navbar", "container", "ulockd-pdng0");
                header.className+=' sticky-header-navbar';
                alert("Hello! I am an alert box!");
            } else {
                header.classList.remove("sticky-header-navbar");
            }
        }
        
    });
    
})(jQuery, this);

   <div  id="sticky-header-navbar" style="height: 80px; margin-top: -45px; margin-bottom: -35px;">
            <div  class="container ulockd-pdng0" style="padding-left: 0!important; padding-right: 0!important;">

                <form role="search" method="get" class="searchform group"  style="display: block;" action="<?php echo home_url( '/' ); ?>" id="deneme1">
                <input type="search"
                       placeholder="
                       <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
                       value="<?php echo get_search_query() ?>" name="s"
                       style="background-color:black; width:100%; min-height: 40px;" placeholder="Search"
                       title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                    <span class="fa fa-search" style="float:right"></span>
                    <style>
                    .search {display: inline-block} /* prevent 100% width */
                    .search .fa-search {left: auto; right: 10px;}
                    </style>
                </form>








                <!-- nav -->
            <nav class="nav" role="navigation" style="background-color: white; z-index: 999; position: relative;">
                     <span style=" z-index: 999;">
                <a class="navbar-brand ulockd-main-logo2" href="#brand" style="margin-top: 0;">
                   <!-- <img src="http://video.helvatica.com/wp-content/bclinico-html/images/header-logo2.png" class="logo logo-scrolled navbar-brand ulockd-main-logo2" alt="">
          -->      </a>
                    </span>
                   
                <?php hekim_nav(); ?>
                         <span class="fa fa-search" style="margin-top: -48px; float:right; margin-right: 15px; right:0; position: absolute;
    z-index: 9999999999;">&#160&#160 rrr</span>



                         <span class="dropdown">
                         <a href="#" class="dropdown-toggle dropdown" data-toggle="dropdown">
                                        <i class="fa fa-shopping-bag dropdown-toggle" type="button" data-toggle="dropdown"></i>
                                        <span class="badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
                                    </a>
 <ul class="dropdown-menu">
      <li><a href="#"><?php storefront_cart_link(); ?></a></li>
      <?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
      <li><a href="#">JavaScript</a></li>
    </ul>
                         </div>>



                         <span class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#"><?php storefront_cart_link(); ?></a></li>
      <?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
      <li><a href="#">JavaScript</a></li>
    </ul>
                </span>
  </div>

0 个答案:

没有答案