Question

我正在开发一个单页网站（我正在使用Travor Davis http://github.com/davist11/jQuery-One-Page-Nav的jQuery One Page Nav插件），我在左侧有一个固定菜单，在右侧有一些滚动内容

不幸的是我的主要内容div的高度是固定的，然后我使用溢出隐藏属性来隐藏div之外的内容，但是当隐藏溢出时插件无法正常工作且内容不再滚动。

我该如何解决这个问题？

请参阅下面的当前代码：

这是插件代码：

;(function($, window, document, undefined){

// our plugin constructor
var OnePageNav = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
    this.metadata = this.$elem.data('plugin-options');
    this.$win = $(window);
    this.sections = {};
    this.didScroll = false;
    this.$doc = $(document);
    this.docHeight = this.$doc.height();
};

// the plugin prototype
OnePageNav.prototype = {
    defaults: {
        navItems: 'a',
        currentClass: 'active',
        changeHash: false,
        easing: 'swing',
        filter: '',
        scrollSpeed: 750,
        scrollThreshold: 0.5,
        begin: false,
        end: false,
        scrollChange: false
    },

    init: function() {
        // Introduce defaults that can be extended either
        // globally or using an object literal.
        this.config = $.extend({}, this.defaults, this.options, this.metadata);

        this.$nav = this.$elem.find(this.config.navItems);

        //Filter any links out of the nav
        if(this.config.filter !== '') {
            this.$nav = this.$nav.filter(this.config.filter);
        }

        //Handle clicks on the nav
        this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));

        //Get the section positions
        this.getPositions();

        //Handle scroll changes
        this.bindInterval();

        //Update the positions on resize too
        this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));

        return this;
    },

    adjustNav: function(self, $parent) {
        self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
        $parent.addClass(self.config.currentClass);
    },

    bindInterval: function() {
        var self = this;
        var docHeight;

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

        self.t = setInterval(function() {
            docHeight = self.$doc.height();

            //If it was scrolled
            if(self.didScroll) {
                self.didScroll = false;
                self.scrollChange();
            }

            //If the document height changes
            if(docHeight !== self.docHeight) {
                self.docHeight = docHeight;
                self.getPositions();
            }
        }, 250);
    },

    getHash: function($link) {
        return $link.attr('href').split('#')[1];
    },

    getPositions: function() {
        var self = this;
        var linkHref;
        var topPos;
        var $target;

        self.$nav.each(function() {
            linkHref = self.getHash($(this));
            $target = $('#' + linkHref);

            if($target.length) {
                topPos = $target.offset().top;
                self.sections[linkHref] = Math.round(topPos);
            }
        });
    },

    getSection: function(windowPos) {
        var returnValue = null;
        var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);

        for(var section in this.sections) {
            if((this.sections[section] - windowHeight) < windowPos) {
                returnValue = section;
            }
        }

        return returnValue;
    },

    handleClick: function(e) {
        var self = this;
        var $link = $(e.currentTarget);
        var $parent = $link.parent();
        var newLoc = '#' + self.getHash($link);

        if(!$parent.hasClass(self.config.currentClass)) {
            //Start callback
            if(self.config.begin) {
                self.config.begin();
            }

            //Change the highlighted nav item
            self.adjustNav(self, $parent);

            //Removing the auto-adjust on scroll
            self.unbindInterval();

            //Scroll to the correct position
            self.scrollTo(newLoc, function() {
                //Do we need to change the hash?
                if(self.config.changeHash) {
                    window.location.hash = newLoc;
                }

                //Add the auto-adjust on scroll back in
                self.bindInterval();

                //End callback
                if(self.config.end) {
                    self.config.end();
                }
            });
        }

        e.preventDefault();
    },

    scrollChange: function() {
        var windowTop = this.$win.scrollTop();
        var position = this.getSection(windowTop);
        var $parent;

        //If the position is set
        if(position !== null) {
            $parent = this.$elem.find('a[href$="#' + position + '"]').parent();

            //If it's not already the current section
            if(!$parent.hasClass(this.config.currentClass)) {
                //Change the highlighted nav item
                this.adjustNav(this, $parent);

                //If there is a scrollChange callback
                if(this.config.scrollChange) {
                    this.config.scrollChange($parent);
                }
            }
        }
    },

    scrollTo: function(target, callback) {
        var offset = $(target).offset().top;

        $('html, body').animate({
            scrollTop: offset
        }, this.config.scrollSpeed, this.config.easing, callback);
    },

    unbindInterval: function() {
        clearInterval(this.t);
        this.$win.unbind('scroll.onePageNav');
    }
};

OnePageNav.defaults = OnePageNav.prototype.defaults;

$.fn.onePageNav = function(options) {
    return this.each(function() {
        new OnePageNav(this, options).init();
    });
};

  })( jQuery, window , document );

这是html代码：

<div id="wrapper">
    <div id="container">
        <div id="left-col">
          <nav id="nav">
            <ul>
              <li class="active">
                <a href="#project">Project</a>
              </li>
              <li>
                <a href="#concept">Concept</a>
              </li>
              <li>
               <a href="#clients">Clients</a>
              </li>
              <li>
                <a href="#technical-specification">Technical<br>specification</a>
              </li>
              <li>
                <a href="#gallery">Gallery</a>
              </li>
          </ul>
      </div>
      <div id="right-col">
        <section id="project">
        </section>
        <section id="concept">
        </section>
        <section id="project">
        </section>
        <section id="clients">
    </section>
    <section id="technical-specification">
    </section>
        <section id="gallery">
    fgdgddg
    </section>
      </div>
 </div>

要查看实际的网站，请点击此处：

http://methlabtest2.altervista.org/EN/

提前致谢。

Answer 1

您添加了overflow: hidden;，它正在执行它的目的（隐藏溢出并且不要滚动）。

如果您想要溢出滚动使用overflow: scroll; overflow-y;

jQuery One Page Nav插件溢出隐藏的问题

1 个答案: