Question

我需要有关JQuery的帮助，我相信这可能是明显的解决方案，但我不知道该怎么做。关于我的滚动页面上的导航栏，我希望导航栏上的一个链接转到外部页面（而不是页面中的某个部分）。它会这样做，但它会弄乱滚动页面，（背景移动到错误的部分等）。我相信我必须更改refElement，但我不确定..请帮助:(谢谢

<ul class='circle-container'>
  <li><img src='http://lorempixel.com/100/100/city'></li>
  <li><img src='http://lorempixel.com/100/100/nature'></li>
  <li><img src='http://lorempixel.com/100/100/abstract'></li>
  <li><img src='http://lorempixel.com/100/100/cats'></li>
  <li><img src='http://lorempixel.com/100/100/food'></li>
  <li><img src='http://lorempixel.com/100/100/animals'></li>
  <li><img src='http://lorempixel.com/100/100/business'></li>
</ul>

/// Mixin to put items on a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
/// 
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
@mixin distribute-on-circle($nb-items, $circle-size, $item-size) {
  $half-item: ($item-size / 2);
  $half-parent: ($circle-size / 2);

  position: relative; /* 1 */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%;
  list-style: none; /* 2 */
  box-sizing: content-box; /* 3 */

  > * { /* 4 */
    display: block;
    position: absolute;
    top:  50%;
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;
  }

  $angle: (360 / $nb-items);
  $rot: 30;

  @for $i from 1 through $nb-items {
    > :nth-of-type(#{$i}) {
      transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
    }
    $rot: ($rot + $angle);
  }
}

.circle-container {
  @include distribute-on-circle(6, 20em, 6em);
  margin: 5em auto 0;
  border: solid 1px tomato;
}

.circle-container img {
  display: block;
  width: 100%;
  border-radius: 50%;
}

----------------------------- HTML ----------------- ---------------

/*=========================================================================
        Navbar ScrollSpy
    =========================================================================*/
    var scrollPos = $(document).scrollTop(),
        nav_height = $('#navbar').outerHeight();

    $('.navbar li a').each(function () {
        var currLink = $(this),
            refElement = $(currLink.attr('href'));
        if( refElement.size() > 0 ){
            if ( ( refElement.position().top - nav_height ) <= scrollPos ) {
                $('.navbar li').removeClass('active');
                currLink.closest('li').addClass('active');
            }else{
                currLink.removeClass('active');
            }
        }
    });


});


//Initialize smoothscroll plugin
smoothScroll.init({
    updateURL: false
});

Answer 1

做了更多的挖掘，发现这个片段有效。感谢

/**
 * Scroll Spy via Bootstrap
 */
$('body').scrollspy({target: "#nav_wrapper", offset:50});

/**
 * Scroll Spy meet WordPress menu.
 */
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
    // Selector for top nav a elements
    $('#top_main_nav a').each( function() {
        if (this.hash.indexOf('#') === 0) {
            // Alert this to an absolute link (pointing to the correct section on the hompage)
            this.href = "/" + this.hash;
        }
    });
}

/**
 * Initiate Awesome Smooth Scrolling based on a.href
 */
$('a.smooth-scroll, #top_main_nav a').click( function() {
    target = $(this).attr('href');
    offset = $(target).offset();
    $('body,html').animate({ scrollTop : offset.top }, 700);
    event.preventDefault();
});

Scrollspy - 将导航栏页面链接到外部URL时页面混乱

1 个答案: