Ein Bündel von Code isn' t arbeiten und I' m versucht zu identifizieren, wo das Problem liegt, aber console.log()
isn' t Protokollierung keine Ergebnisse in Chrome Dev-Tools, bin ich es richtig tun?
$(window).scroll(function() {
$('section').each(function(){
var id='#'+$(this).attr('id'),
off=$(id).offset().top,
hei=$(id).height(),
winscroll=$(window).scrollTop(),
dif=hei+off-($(window).height());
if (winscroll >= off && winscroll<=dif) {
console.log('first broken');
$(id+' .sticky').removeClass('abs').addClass('fix');
} else if (winscroll > dif){
console.log('second broken');
$(id+' .sticky').removeClass('fix').addClass('abs');
} else {
console.log('third broken');
$(id+' .sticky').removeClass('fix abs');
} });
});
EDIT VOLLSTÄNDIGER CODE HINZUGEFÜGT
$(document).ready(function() {
// If a browser supports 3D transforms use the fancy menu if it doesn't, use standard accordion menu instead
if($('html').hasClass('csstransforms3d')){
$( "#mp-menu" ).removeClass( "snap-drawers" ).addClass( "mp-menu" );
$('nav ul li ul').css('border-bottom','1px solid rgba(255, 255, 255, .05)');
$('nav ul li ul').css('background','none');
// Insert elements where necessary to create the right structure
$('#mp-menu').wrapInner('<div class="mp-level" />');
$('#mp-menu').find('li > ul').wrap('<div class="mp-level" />');
$("#mp-menu ul li .mp-level").prepend(function () {
return '<span class="menu-title">' + $(this).prev().text() + '</span> <a class="ico mp-back" href="#">Back</a>';
});
// load in necessary JS files
$.getScript('http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/multi-level-menu.js');
} else {
// load in necessary JS files
$.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/jquery.navgoco.min.js", function() {
$("#demo1").navgoco({accordion: true});
});
$.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/snap.min.js", function() {
// Snapper settings
var snapper = new Snap({
element: document.getElementById('scroller'),
disable: 'right',
maxPosition: 291
});
var addEvent = function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
};
// Toggle button
addEvent(document.getElementById('trigger'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
$( ".menu-trigger" ).removeClass( "active" );
} else {
snapper.open('left');
$( ".menu-trigger" ).addClass( "active" );
}
});
addEvent(document.getElementById('scroller'), 'click', function(){
if( snapper.state().state=="left" ){
$( ".menu-trigger" ).removeClass( "active" );
}
});
/* Prevent Safari opening links when viewing as a Mobile App */
(function (a, b, c) {
if(c in b && b[c]) {
var d, e = a.location,
f = /^(a|html)$/i;
a.addEventListener("click", function (a) {
d = a.target;
while(!f.test(d.nodeName)) d = d.parentNode;
"href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
}, !1)
}
})(document, window.navigator, "standalone");
});
} // end if
fitHeight();
$(window).scroll(function() {
$('section').each(function(){
var id='#'+$(this).attr('id'),
off=$(id).offset().top,
hei=$(id).height(),
winscroll=$(window).scrollTop(),
dif=hei+off-($(window).height());
console.log('msj');
if (winscroll >= off && winscroll<=dif) {
$(id+' .sticky').removeClass('abs').addClass('fix');
} else if (winscroll > dif){
$(id+' .sticky').removeClass('fix').addClass('abs');
} else {
$(id+' .sticky').removeClass('fix abs');
}
});
});
});
// Trigger FitHeight on browser resize
$(window).resize(fitHeight);
EDIT
Einige Teile des vollständigen Codes (oben) verweisen auf andere JS-Dateien und der Code gibt keine Fehler zurück, wenn er mit diesen Dateien ausgeführt wird. Nach der Fehlersuche sehe ich die Konsolenmeldung vor der Bildlauffunktion, aber ich sehe die Konsolenmeldung nicht innerhalb der Bildlauffunktion.
fitHeight();
console.log('About to bind scroll effects'); // I SEE THIS MESSAGE
$(window).scroll(function() {
console.log("scroll bound, now loop through sections"); //BUT NOT THIS ONE
$('section').each(function(){
Klingt so, als hätten Sie entweder JavaScript-Protokolle ausgeblendet oder angegeben, dass Sie nur Fehler oder Warnungen sehen wollen. Öffnen Sie die Entwicklertools von Chrome und gehen Sie auf die Registerkarte Konsole. Unten müssen Sie sicherstellen, dass JavaScript aktiviert ist und dass Sie "Alle", "Protokolle" oder "Debug" ausgewählt haben.
In der obigen Abbildung habe ich JavaScript, Netzwerk, Protokollierung, CSS und Andere angekreuzt und "Alle" ausgewählt.
Ein weiteres mögliches Problem könnte sein, dass Ihre Funktion $(window).scroll()
nicht in eine Funktion .ready()
eingebunden ist (wie hier dokumentiert):
$(document).ready(function() {
$(window).scroll(function() {
...
});
});
Wenn Sie Ihren Code in JSFiddle einfügen und einen Dummy-Inhalt angeben, funktioniert Ihr Code einwandfrei: [JSFiddle demo][3].
Die Frage wurde bearbeitet. Der neue Code wirft zwei Fehler aus:
Uncaught ReferenceError: fitHeight ist nicht definiert Ungefangener TypeError: Cannot read property 'addEventListener' of null
Aus diesem Grund bricht der Code die Ausführung ab, bevor ein Aufruf von console.log
erfolgt.
Ich komme mir ein bisschen blöd vor, aber das soll allen eine Lehre sein... Achten Sie darauf, dass Sie den richtigen Selektor auswählen!
Grundsätzlich war die Konsole wasn't Protokollierung nichts, weil diese besondere Code-Snippet wurde versucht, die Scrolling-Bereich meines Fensters zu greifen, wenn in der Tat mein Code wurde anders eingerichtet, um eine ganze DIV statt scrollen. Sobald ich geändert:
$(window).scroll(function() {
zu diesem:
$('#scroller').scroll(function() {
Die Konsole begann, die richtigen Meldungen zu protokollieren.
Überlegen Sie sich einen pragmatischeren Ansatz für die Frage, wie man es richtig macht.
console.log("about to bind scroll fx");
$(window).scroll(function() {
console.log("scroll bound, loop through div's");
$('div').each(function(){
Wenn beide "log"-Ausgaben korrekt sind, dann liegt das Problem wahrscheinlich in Ihrer var-Deklaration. Um diese zu debuggen, sollten Sie sie in mehrere Zeilen aufteilen:
var id='#'+$(this).attr('id');
console.log(id);
var off=$(id).offset().top;
var hei=$(id).height();
var winscroll=$(window).scrollTop();
var dif=hei+off-($(window).height());
Auf diese Weise können Sie, zumindest während der Fehlersuche, feststellen, dass die var id
undefiniert ist, was zu Fehlern im restlichen Code führt. Ist es möglich, dass einige Ihrer div
Tags keine id's haben?