pioneer1983
New member
Hallo zusammen,
ich bin noch recht neu beim Thema jquery angekommen und habe folgendes Problem:
In mein neues Projekt habe ich zwei Skripte eingebaut: "Scroll to" und "mousewheel".
Der Mousewheel - Effekt funktioniert ohne Probleme und ich kann von Seite zu Seite sliden. Scroll to
funktioniert ebenso aber wenn ich in der Navigation scroll to benutze und zu einem Anker springe(slide)
dann kann ich mit dem Mousewheel-Effekt nicht mehr nach oben scrollen. Es verschiebt sich alles nach unten bzw.
ich kann nur noch nach unten scrollen - auch in einen neuen unteren leeren Raum.
Es wird wahrscheinlich damit zusammen hängen dass der Scrollbalken bei der Scroll to - Funktion die Position verändert und bei der Mousewheel - Funktion nicht?
Wäre super wenn mir jemand helfen könnte...
Der code sieht inkl. jquery folgendermaßen aus:
ich bin noch recht neu beim Thema jquery angekommen und habe folgendes Problem:
In mein neues Projekt habe ich zwei Skripte eingebaut: "Scroll to" und "mousewheel".
Der Mousewheel - Effekt funktioniert ohne Probleme und ich kann von Seite zu Seite sliden. Scroll to
funktioniert ebenso aber wenn ich in der Navigation scroll to benutze und zu einem Anker springe(slide)
dann kann ich mit dem Mousewheel-Effekt nicht mehr nach oben scrollen. Es verschiebt sich alles nach unten bzw.
ich kann nur noch nach unten scrollen - auch in einen neuen unteren leeren Raum.
Es wird wahrscheinlich damit zusammen hängen dass der Scrollbalken bei der Scroll to - Funktion die Position verändert und bei der Mousewheel - Funktion nicht?
Wäre super wenn mir jemand helfen könnte...
Der code sieht inkl. jquery folgendermaßen aus:
Code:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
return false;
});
</script>
<script type='text/javascript'>//<![CDATA[
$(function(){
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.11",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b)["offsetParent"in a.fn?"offsetParent":"parent"]();return c.length||(c=a("body")),parseInt(c.css("fontSize"),10)},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
var Parallax = {
utils: {
doSlide: function(section) {
var top = section.position().top;
$('#wrapper').stop().animate({
top: -top
}, 1000, 'linear', function() {
section.addClass('slided').siblings('div.section').removeClass('slided');
});
}
},
fn: {
setHeights: function() {
$('div.section').height($(window).height());
},
onSiteScroll: function() {
var section = null;
$('#wrapper').mousewheel(function(event, delta) {
event.preventDefault();
if (delta < 0) {
section = ($('.slided').length) ? $('.slided') : $('#contend');
var next = (section.next().length) ? section.next() : $('#contend');
Parallax.utils.doSlide(next);
}
else if(delta > 0) {
section = ($('.slided').length) ? $('.slided') : $('#section-1');
var prev = (section.prev().length) ? section.prev() : $('#section-1');
Parallax.utils.doSlide(prev);
}
});
}
},
init: function() {
for (var prop in this.fn) {
if (typeof this.fn[prop] === 'function') {
this.fn[prop]();
}
}
}
};
Parallax.init();
});//]]>
</script>
</head>
<body>
<div id="wrapper">
<div id="navi"></div>
<div class="section" id="contend"></div>
<div id="link2"><a name="b" id="b"></a></div>
<div class="section" id="box1"></div>
<div class="section" id="box2"></div>
</div>
</div>
</Body>
</html>
Ich arbeite gerade an einer Seite auf der man manuell den Scroll to - Effekt über die Navigation einsetzt aber