頂部固定導航欄中沒有響應的鏈接

Question

我爲單頁site使用了一個小小的Javascript導航欄。我所有的文本鏈接都可以正常工作，但右側的出站社交媒體鏈接沒有響應（除非您通過次級單擊並從此處打開它）。現在，我只是在JQuery和Javascript中知之甚少......我可以理解它，它是如何工作的，但是當涉及到錯誤時我無法弄清楚。感謝您的幫助！ :)

這裏是我的CSS：

.single-page-nav { 
    background: rgb(255, 255, 255); 
    background: rgba(255, 255, 255, .9); 
    padding: 1.25em 0; 
    box-shadow: 0px 2px 8px #555; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index:100000; 
} 

.single-page-nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    margin-left: -30px; 
    width: 80%; 
    overflow: hidden; 
} 

.single-page-nav li { 
    float: left; 
    width: 16%; 
    text-align: center; 
} 

.single-page-nav a { 
    display: block; 
    color: #000; 
    font-family: 'Calibri', Helvetica, Sans-Serif; 
    text-decoration: none;    
    font-size: 18px; 
    font-weight: bold; 
    line-height:1.5em; 
} 

.single-page-nav a:hover, 
.single-page-nav .current { 
    color: #F92F2C; 
} 

這裏是我的HTML

<nav id="menu" role="navigation"> 
    <div class="single-page-nav"> 
     <ul> 
      <li><a href="#header">Page Top</a></li> 
      <li><a href="#videohead">Watch the Video</a></li> 
      <li><a href="#kickhead">Kickstarter</a></li> 
      <li><a href="#abouthead">About the Project</a></li> 
      <li><a href="#meethead">Meet the Team</a></li> 
      <li><a href="#whathead">What Are We Doing?</a></li> 
     </ul> 

     <span id="socialtop1"> 
      <a href="mailto:divya@thedivyaproject.com"><img src="/wp-content/images/emailg.png" alt="Email" /></a> 
     </span> 

     <span id="socialtop2"> 
      <a href="http://www.youtube.com/channel/UC94WMtUbVWAzXJIAxAw_cMg"><img src="/wp-content/images/ytg.png" alt="YouTube" /></a> 
     </span> 

     <span id="socialtop3"> 
      <a href="http://www.vimeo.com/thedivyaproject"><img src="/wp-content/images/vmg.png" alt="Vimeo" /></a> 
     </span> 

     <span id="socialtop4"> 
      <a href="http://www.instagram.com/thedivyaproject"><img src="/wp-content/images/instag.png" alt="Instagram" /></a> 
     </span> 

     <span id="socialtop5"> 
      <a href="http://www.twitter.com/thedivyaproject"><img src="/wp-content/images/twg.png" alt="Twitter" /></a> 
     </span> 

     <span id="socialtop6"> 
      <a href="http://www.facebook.com/thedivyaproject"><img src="/wp-content/images/fbg.png" alt="Facebook" /></a> 
     </span> 

    </div> 
</nav> 

而且，最後但並非最不重要的，這裏是JQuery的/ JavaScript的。我沒有寫出大部分內容，它來自我使用的教程。

// Utility 
if (typeof Object.create !== 'function') { 
Object.create = function(obj) { 
    function F() {} 
    F.prototype = obj; 
    return new F(); 
}; 
} 

(function($, window, document, undefined) { 
"use strict"; 

var SinglePageNav = { 

    init: function(options, container) { 

     this.options = $.extend({}, $.fn.singlePageNav.defaults, options); 

     this.container = container;    
     this.$container = $(container); 
     this.$links = this.$container.find('a'); 

     if (this.options.filter !== '') { 
      this.$links = this.$links.filter(this.options.filter); 
     } 

     this.$window = $(window); 
     this.$htmlbody = $('html, body'); 

     this.$links.on('click.singlePageNav', $.proxy(this.handleClick, this)); 

     this.didScroll = false; 
     this.checkPosition(); 
     this.setTimer(); 
    }, 

    handleClick: function(e) { 
     var self = this, 
      link = e.currentTarget, 
      $elem = $(link.hash); 

     e.preventDefault();    

     if ($elem.length) { // Make sure the target elem exists 


      // Prevent active link from cycling during the scroll 
      self.clearTimer(); 

      // Before scrolling starts 
      if (typeof self.options.beforeStart === 'function') { 
       self.options.beforeStart(); 
      } 

      self.setActiveLink(link.hash); 

      self.scrollTo($elem, function() { 

       if (self.options.updateHash) { 
        document.location.hash = link.hash; 
       } 

       self.setTimer(); 

       // After scrolling ends 
       if (typeof self.options.onComplete === 'function') { 
        self.options.onComplete(); 
       } 
      });        
     }  
    }, 

    scrollTo: function($elem, callback) { 
     var self = this; 
     var target = self.getCoords($elem).top; 
     var called = false; 

     self.$htmlbody.stop().animate(
      {scrollTop: target}, 
      { 
       duration: self.options.speed, 
       complete: function() { 
        if (typeof callback === 'function' && !called) { 
         callback(); 
        } 
        called = true; 
       } 
      } 
     ); 
    }, 

    setTimer: function() { 
     var self = this; 

     self.$window.on('scroll.singlePageNav', function() { 
      self.didScroll = true; 
     }); 

     self.timer = setInterval(function() { 
      if (self.didScroll) { 
       self.didScroll = false; 
       self.checkPosition(); 
      } 
     }, 250); 
    },   

    clearTimer: function() { 
     clearInterval(this.timer); 
     this.$window.off('scroll.singlePageNav'); 
     this.didScroll = false; 
    }, 

    // Check the scroll position and set the active section 
    checkPosition: function() { 
     var scrollPos = this.$window.scrollTop(); 
     var currentSection = this.getCurrentSection(scrollPos); 
     this.setActiveLink(currentSection); 
    },   

    getCoords: function($elem) { 
     return { 
      top: Math.round($elem.offset().top) - this.options.offset 
     }; 
    }, 

    setActiveLink: function(href) { 
     var $activeLink = this.$container.find("a[href='" + href + "']"); 

     if (!$activeLink.hasClass(this.options.currentClass)) { 
      this.$links.removeClass(this.options.currentClass); 
      $activeLink.addClass(this.options.currentClass); 
     } 
    },   

    getCurrentSection: function(scrollPos) { 
     var i, hash, coords, section; 

     for (i = 0; i < this.$links.length; i++) { 
      hash = this.$links[i].hash; 

      if ($(hash).length) { 
       coords = this.getCoords($(hash)); 

       if (scrollPos >= coords.top - this.options.threshold) { 
        section = hash; 
       } 
      } 
     } 

     // The current section or the first link 
     return section || this.$links[0].hash; 
    } 
}; 

$.fn.singlePageNav = function(options) { 
    return this.each(function() { 
     var singlePageNav = Object.create(SinglePageNav); 
     singlePageNav.init(options, this); 
    }); 
}; 

$.fn.singlePageNav.defaults = { 
    offset: 0, 
    threshold: 120, 
    speed: 400, 
    currentClass: 'current', 
    updateHash: false, 
    filter: '', 
    onComplete: false, 
    beforeStart: false 
}; 

})(jQuery, window, document); 

Answer 1

的問題是，你的JavaScript徹底的改變了容器內的默認鏈接行爲。它也將這種JavaScript功能應用於您的外部鏈接，您不希望這些功能能夠正常工作。

• 這個位e.preventDefault();在你的javascript中阻止瀏覽器正常處理click事件。
• 要解決您的問題，我會將類應用到ul（因爲您的社交鏈接超出此ul），並調整您的CSS一點。

就個人而言，我會改變的CSS像這樣：

.topnav { ... } 

.single-page-nav { ... } 
.single-page-nav li { ... } 

.topnav a { ... } 
.topnav a:hover, .topnav .current { ... }