Question

我正在建立一个左侧有粘滞/固定导航的网站，所有内容都向右滚动。

我正在使用javascript将我的导航链接到滚动内容中的div。这很好用，除了我的导航仅在加载了所有内容后才能工作，否则导航会将我发送到滚动内容中的随机点（我认为这是因为图像内容需要首先加载以注册其正确的位置）。

如何在不手动设置每张图片的尺寸的情况下让我的导航在加载时工作？

我正在使用unveil.js在滚动条件上加载图片，这就是我的图片网址在data-src属性中的原因。

jQuery推出http://luis-almeida.github.io/unveil/

<div class="social">
  <ul>
    <li>
      <a href="#section1" class="navlink">Section 1</a>
    </li>
    <li>
      <a href="#section1" class="navlink">Section 1</a>
    </li>
  </ul>
</div>

<div id="section1" class="section">
  <a href="#"><img src="#" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg" /></a>
 </div>

<div id="section2" class="section">
  <a href="#"><img src="#" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg" /></a>
</div>

/ * UNVEIL * /

  $(document).ready(function() {
    $("img").unveil();
  });

/ * Floating Nav * /

  $(function() {
    var $window = $(window),
      main = $('.main'),
      social = $('.social');

    function floatSocialMenu() {
      if ($window.scrollTop() > main.position().top)
        social.css('position', 'fixed');
      else
        social.css('position', 'absolute');
    }

    $(window).resize(floatSocialMenu);
    $(window).scroll(floatSocialMenu);
  });

/ *滚动顶部按钮* /

  $(document).ready(function() {

    $(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
      } else {
        $('.scrollup').fadeOut();
      }
    });

    $('.scrollup').click(function() {
      $("html, body").animate({
        scrollTop: 0
      }, 600);
      return false;
    });

/ *激活导航* /

    $('.navlink').click(function() {
      $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 20
      }, 500);
      return false;
    });

    $(window).scroll(function() {

      var position = $(this).scrollTop();

      $('.section').each(function() {
        var target = $(this).offset().top;
        var id = $(this).attr('id');

        if (position >= target) {
          $('.social > ul > li > a').removeClass('active');
          $('.social > ul > li > a[href=#' + id + ']').addClass('active');
        }
      });
    });

  });
</script>

JS导航仅在加载所有图像后才有效

0 个答案: