Console.log no funciona en absoluto
Un montón de código no está funcionando y estoy tratando de identificar dónde está el problema, pero console.log() no está registrando ningún resultado en Chrome Dev tools, ¿lo estoy haciendo correctamente?
$(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');
} });
});EDITAR CÓDIGO COMPLETO AÑADIDO
$(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
Algunas partes del código completo (arriba) hacen referencia a otros archivos JS y el código no devuelve errores cuando se ejecuta con estos archivos presentes. Después de solucionar el problema, veo el mensaje de la consola antes de la función de desplazamiento, pero no veo el mensaje de la consola dentro de la función de desplazamiento.
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(){
27
3
Parece que ha ocultado los registros de JavaScript o ha especificado que sólo desea ver Errores o Advertencias. Abra las Herramientas de desarrollo de Chrome y vaya a la pestaña Consola. En la parte inferior que desea asegurarse de que JavaScript está marcada y también asegurarse de que tiene "Todos", "Logs" o "Depuración" seleccionado.
Ejemplo de pantalla]1
En la imagen de arriba tengo JavaScript, Network, Logging, CSS y Other marcados y "All" seleccionado.
Otro problema potencial podría ser que su función
$(window).scroll()no está envuelta dentro de una función.ready()(como se documenta aquí):Al pegar tu código en JSFiddle y darle un contenido ficticio, tu código funciona perfectamente: [JSFiddle demo][3].
Editar:
La pregunta fue editada. El nuevo código dado arroja dos errores:
Debido a esto, el código detiene la ejecución antes de llegar a cualquier llamada a
console.log.Me siento un poco estúpido con esto, pero que sirva de lección para todos... ¡Asegúrate de apuntar al selector correcto!
Básicamente, la consola no estaba registrando nada porque este fragmento de código en particular estaba tratando de agarrar el área de desplazamiento de mi ventana, cuando en realidad mi código estaba configurado de manera diferente para desplazar todo un DIV en su lugar. Tan pronto como cambié:
a esto:
La consola comenzó a registrar los mensajes correctos.
Considere un enfoque más pragmático de la cuestión de "hacerlo correctamente".
Si ambos
logs de salida correctamente, entonces es probable que el problema existe en su declaración var. Para depurar que, considere la posibilidad de dividirlo en varias líneas:Al hacer esto, al menos durante la depuración, puede encontrar que el
idvar es indefinido, causando errores en todo el resto del código. ¿Es posible que algunas de tus etiquetasdivno tengan id's?