Привязка к событию прокрутки не применяется активно - PullRequest
Новая
       1

Привязка к событию прокрутки не применяется активно

0 голосов
/ 30 августа 2018

Я нашел решение этого вопроса Здесь, на переполнении стека Я пытался скопировать его, используя их решение для моего собственного сайта. Я прошел через несколько других переполнений стека, пытаясь выяснить, что мне не хватает. Я все еще изучаю jQuery и Javascript, поэтому я предполагаю, что есть что-то явно очевидное, что я забыл изменить исходное решение. Я также воссоздал это в codepen для удобства. Codepen . Надеюсь, что вы, ребята, сможете помочь мне понять, что я делаю здесь не так, пытаясь сделать это несколько часов, и я в растерянности. Заранее спасибо! 

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});
body {
    height: 6000px;
    font-family: Helvetica, Arial;
}

#web {
    position: absolute;
    top: 400px;
}

#seo {
    position: absolute;
    top: 800px;
}

#recent {
    position: absolute;
    top: 1200px;
}

#about {
    position: absolute;
    top: 1600px;
}

#contact {
    position: absolute;
    top: 2000px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
  <a class="navbar-brand" href="#">
    <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
  </a>
  <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav" id="top-menu">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#web">Web &amp; Graphics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#seo">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#recent">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

<a id="web">Web</a>


<a id="seo">SEO</a>


<a id="recent">recent</a>

<a id="about">about</a>

<a id="contact">contact</a>

1 Ответ

0 голосов
/ 30 августа 2018

slim версия jQuery не содержит все оригинальные функции jQuery.

Так что вы должны использовать полную версию.

И есть некоторые различия в выборе элементов между jQuery 2.2.1 и jQuery 3.3.1.

Вот простой тест:

с jQuery 2.2.1 

$("#")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

с jQuery 3.3.1

Вы увидите ошибку с jQuery 3.3.1. 

$("#")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Чтобы исправить вашу проблему, есть два варианта.

1) использовать jQuery 2.2.1 без каких-либо изменений кода 

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});
body {
    height: 6000px;
    font-family: Helvetica, Arial;
}

#web {
    position: absolute;
    top: 400px;
}

#seo {
    position: absolute;
    top: 800px;
}

#recent {
    position: absolute;
    top: 1200px;
}

#about {
    position: absolute;
    top: 1600px;
}

#contact {
    position: absolute;
    top: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
  <a class="navbar-brand" href="#">
    <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
  </a>
  <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav" id="top-menu">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#web">Web &amp; Graphics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#seo">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#recent">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

<a id="web">Web</a>


<a id="seo">SEO</a>


<a id="recent">recent</a>

<a id="about">about</a>

<a id="contact">contact</a>

2) используйте jQuery 3.3.1 и исправьте ошибку unrecognized expression: #, заменив "#" на "#home"

var lastId,
  topMenu = $("#top-menu"),
  topMenuHeight = topMenu.outerHeight() + 15,
  menuItems = topMenu.find("a"),
  scrollItems = menuItems.map(function() {
    var item = $($(this).attr("href"));
    if (item.length) {
      return item;
    }
  });

menuItems.click(function(e) {
  var href = $(this).attr("href"),
    // replace "#" with "#home"
    offsetTop = href === "#home" ? 0 : $(href).offset().top - topMenuHeight + 1;
  $('html, body').stop().animate({
    scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});


$(window).scroll(function() {
  var fromTop = $(this).scrollTop() + topMenuHeight;
  var cur = scrollItems.map(function() {
    if ($(this).offset().top < fromTop)
      return this;
  });
  cur = cur[cur.length - 1];
  var id = cur && cur.length ? cur[0].id : "";

  if (lastId !== id) {
    lastId = id;
    menuItems
      .parent().removeClass("active")
      .end().filter("[href='#" + id + "']").parent().addClass("active");
  }
});
body {
  height: 6000px;
  font-family: Helvetica, Arial;
}

#web {
  position: absolute;
  top: 400px;
}

#seo {
  position: absolute;
  top: 800px;
}

#recent {
  position: absolute;
  top: 1200px;
}

#about {
  position: absolute;
  top: 1600px;
}

#contact {
  position: absolute;
  top: 2000px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
  <!-- add id="home" and replace "#" with "#home" -->
  <a class="navbar-brand" href="#home" id="home">
    <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
  </a>
  <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav" id="top-menu">
      <li class="nav-item">
        <!-- replace "#" with "#home" -->
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#web">Web &amp; Graphics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#seo">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#recent">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

<a id="web">Web</a>


<a id="seo">SEO</a>


<a id="recent">recent</a>

<a id="about">about</a>

<a id="contact">contact</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...