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彻底改变了single-page-nav容器内的默认链接行为。它也将此javascript功能应用于您的外部链接，您不希望它们正常工作。

您的javascript中的此位e.preventDefault();会阻止浏览器正常处理点击事件。
要解决您的问题，我会将课程single-page-nav应用于ul（因为您的社交链接不在此ul）并稍微调整您的CSS。

就个人而言，我会改变这样的CSS：

.topnav { ... }

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

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

顶部固定导航栏中的链接无响应

1 个答案: