0

我正在尝试实现类似这个例子的东西。

这个单页网站在调整大小时保持当前视图。例如，如果我正在阅读部分：#p_partnerships 在调整浏览器窗口大小时，它仍将显示#p_partnerships.

我修改了一些单页引导模板。

它就像一个魅力，但是当我调整它的大小时，它的行为就像任何其他可滚动页面一样。我的意思是回到在调整大小之前可见的部分，我必须单击某个链接，然后再次单击该部分的链接。我不关心 myprovence 的鼠标滚动效果，我需要的只是将当前查看的部分的顶部保持在导航栏的正下方。

这是我所拥有的一些点点滴滴：

除了jQuery ScrollTo，我的模板还使用了jQuery One Page Nav Plugin

;(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.$nav = this.$elem.find('a');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};

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

init: function() {
var self = this;

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

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

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

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

//Handle scroll changes
self.bindInterval();

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

eturn 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) - self.config.scrollOffset;
}
});
},

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
$.scrollTo(newLoc, self.config.scrollSpeed, {
axis: 'y',
easing: self.config.easing,
offset: {
top: -self.config.scrollOffset
},
onAfter: 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);
}
}
}
},

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 文档中，我有这一点：

<script>
$('#top-nav').onePageNav({
currentClass: 'active',
changeHash: true,
scrollSpeed: 1200
});

</script>

我尝试了 Alexander 建议的一段代码，但它对我不起作用。

第一部分：

<script>
function goToByScroll(id){
$('html, body').stop().animate({scrollTop: $(id).offset().top}, 2000);
}
</script>

确实可以使用这样的链接

<a href="#" onClick="goToByScroll('#section-2')">

但这是我已经拥有的东西。

我已经尝试过这样的东西

$(window).on("resize", function () {
goToByScroll('#section-2')

#section-two每次我调整浏览器大小时，它都会滚动到顶部。

需要一些解决方案来滚动到当前查看的部分，而不是总是相同#section-2

4

1 回答 1

0

你需要两件事来完成这项工作：一个滚动到 div 的函数，以及一个知道某人何时滚动的侦听器。

首先，一个可以滚动到您的 div 的 jQuery 函数。您可以使用类似的东西：

function goToByScroll(id){
  $('html, body').stop().animate({scrollTop: $(id).offset().top}, 2000);
}

请参阅Jquery - 滚动到 div或搜索 Stackoverflow 以获取更多信息。然后你需要知道你什么时候滚动。您可以为此使用 jQuery，然后调用函数 goToByScroll()

var lastScrollTop = 0;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
    // downscroll code
    goToByScroll(next_page_id);
  } else {
    // upscroll code
    goToByScroll(last_page_id);
  }
  lastScrollTop = st;
});

请参阅如何确定 jQuery 滚动事件的方向？ 这应该足以让你有一个好的开始。您只需要跟踪您当前所在的页面，以及上下滚动时的下一页面。

于 2013-09-26T19:12:19.150 回答