1

Este código funciona perfectamente en Firefox pero en Chrome me da error Uncaught TypeError: Cannot read property 'offsetHeight' of null. ¿Qué otra propiedad podria usar en vez de el offsetHeight que tanto Chrome como Firefox la acepten?

Y otra pregunta. No sé por qué, pero el div w-arrow-contact nunca me señala la tardera opción (branding) al hacer scroll. Y he chequeado por consola y cuando estoy en el último y penúltimo punto del scroll y me da TRUE la condicional que desencadena el evento arrowBrand().

	function arrowAbout(){
		document.getElementById("arrow-contact").className = "w-arrow-contact w-about";
	}

	function arrowTerms(){
		document.getElementById("arrow-contact").className = "w-arrow-contact w-terms";
	}

	function arrowBrand(){
		document.getElementById("arrow-contact").className = "w-arrow-contact w-brand";
	}

	var totalHeight = Math.max( document.body.scrollHeight, document.body.offsetHeight,  document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );

	jQuery(document).ready(function($){
		$( window ).scroll(function() {
			if(  window.pageYOffset >= document.getElementById("content-about").offsetHeight && window.pageYOffset <= document.getElementById("content-brand").offsetHeight){
					arrowTerms();
			}else if((window.pageYOffset+150) >= document.documentElement.scrollTopMax){
				arrowBrand();
			}else{
				arrowAbout();
			}
		});
	});
body{ font-family: century Gothic, Verdana; color:#444;}

.sub-menu{
	width: 250px;
	background-color: #444;
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding-right: 2rem;
	position: fixed;
}

.sub-menu section{
	position:relative;
	text-align:right;
}

.sub-menu a {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 40px;
    display: block;
    text-decoration:none;
}

.w-arrow-contact{
	border-right:11px solid transparent;
	border-top:7px solid transparent;
	border-bottom:7px solid transparent;
	width:0;
	height:0;
	position:absolute;
	right:-2rem;
	transition: all 0.3s ease;
	top:0;
}

.contenido{
	padding:3.5rem 4rem;
  margin-left:250px;
}

#a-about:hover ~ .w-arrow-contact, .w-about{
		border-right:11px solid #fff;
		top:0.8rem;
	}

	#a-terms:hover ~ .w-arrow-contact, .w-terms{
		border-right:11px solid #fff;
		top:3.3rem;
	}

	#a-branding:hover ~ .w-arrow-contact, .w-brand{
		border-right:11px solid #fff;
		top:5.8rem;
	}
<html>
<head>
</head>
<body>
	<div class="sub-menu  menu-contact">
		<section id="nav-contact">
			<a href="#about" id="a-about" class="smoothScroll" onclick="arrowAbout()">
				Sobre nosotros
			</a>
			<a href="#terms" id="a-terms" class="smoothScroll" onclick="arrowTerms()">
				Términos y condiciones
				</a>
			<a href="#branding" id="a-branding" class="smoothScroll" onclick="arrowBrand()">
				Branding
			</a>
			<div class="w-arrow-contact  w-about" id="arrow-contact"></div>
	</section>
</div>

<section class="contenido  contenido-contact">
	<div id="content-brand">
		<div id="content-terms">
			<div id="content-about">
				<h2 id="about">Sobre nosotros</h2>

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et lorem fermentum, lacinia nulla et, posuere lectus. Phasellus gravida maximus tortor malesuada viverra. Etiam euismod ante sit amet ligula lacinia, at facilisis sapien pellentesque. Donec condimentum ligula vitae velit luctus luctus. In id felis dapibus, finibus metus a, aliquet nisl. Suspendisse potenti. Aenean nisl ante, consectetur quis nisi vel, feugiat egestas arcu. In non finibus mi. Nullam vitae rutrum enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

				Nam ligula erat, aliquam et odio nec, ullamcorper blandit sapien. Proin ornare vel lacus ut finibus. Sed at nibh tortor. Pellentesque at varius erat, id pretium nisl. Quisque sed enim aliquam, rutrum turpis eget, rutrum nibh. Vivamus porta egestas quam ac elementum. Aliquam est magna, ornare at congue at, egestas eu dui. Morbi quis rutrum erat. Praesent finibus nec lectus sed ultrices.

				In vel ultrices felis. Ut nec ultrices magna. Maecenas cursus vel sem nec mattis. Duis fermentum cursus pretium. Curabitur laoreet dolor non porta dignissim. Aliquam ornare in eros eu tempus. Sed laoreet risus purus, quis scelerisque ligula bibendum sit amet. Fusce quis libero vel felis mollis eleifend in varius magna. Fusce porta hendrerit neque, ut eleifend augue ullamcorper lobortis. Proin massa massa, semper sit amet sapien ut, laoreet euismod diam. Proin vitae egestas tellus. 
			</div>
			
			<h2 id="terms">Términos y condiciones</h2>

			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et lorem fermentum, lacinia nulla et, posuere lectus. Phasellus gravida maximus tortor malesuada viverra. Etiam euismod ante sit amet ligula lacinia, at facilisis sapien pellentesque. Donec condimentum ligula vitae velit luctus luctus. In id felis dapibus, finibus metus a, aliquet nisl. Suspendisse potenti. Aenean nisl ante, consectetur quis nisi vel, feugiat egestas arcu. In non finibus mi. Nullam vitae rutrum enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

			Nam ligula erat, aliquam et odio nec, ullamcorper blandit sapien. Proin ornare vel lacus ut finibus. Sed at nibh tortor. Pellentesque at varius erat, id pretium nisl. Quisque sed enim aliquam, rutrum turpis eget, rutrum nibh. Vivamus porta egestas quam ac elementum. Aliquam est magna, ornare at congue at, egestas eu dui. Morbi quis rutrum erat. Praesent finibus nec lectus sed ultrices.

			In vel ultrices felis. Ut nec ultrices magna. Maecenas cursus vel sem nec mattis. Duis fermentum cursus pretium. Curabitur laoreet dolor non porta dignissim. Aliquam ornare in eros eu tempus. Sed laoreet risus purus, quis scelerisque ligula bibendum sit amet. Fusce quis libero vel felis mollis eleifend in varius magna. Fusce porta hendrerit neque, ut eleifend augue ullamcorper lobortis. Proin massa massa, semper sit amet sapien ut, laoreet euismod diam. Proin vitae egestas tellus. 

			</div>
		
		<h2 id="branding">Branding</h2>
			
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et lorem fermentum, lacinia nulla et, posuere lectus. Phasellus gravida maximus tortor malesuada viverra. Etiam euismod ante sit amet ligula lacinia, at facilisis sapien pellentesque. Donec condimentum ligula vitae velit luctus luctus. In id felis dapibus, finibus metus a, aliquet nisl. Suspendisse potenti. Aenean nisl ante, consectetur quis nisi vel, feugiat egestas arcu. In non finibus mi. Nullam vitae rutrum enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

		Nam ligula erat, aliquam et odio nec, ullamcorper blandit sapien. Proin ornare vel lacus ut finibus. Sed at nibh tortor. Pellentesque at varius erat, id pretium nisl. Quisque sed enim aliquam, rutrum turpis eget, rutrum nibh. Vivamus porta egestas quam ac elementum. Aliquam est magna, ornare at congue at, egestas eu dui. Morbi quis rutrum erat. Praesent finibus nec lectus sed ultrices.

		In vel ultrices felis. Ut nec ultrices magna. Maecenas cursus vel sem nec mattis. Duis fermentum cursus pretium. Curabitur laoreet dolor non porta dignissim. Aliquam ornare in eros eu tempus. Sed laoreet risus purus, quis scelerisque ligula bibendum sit amet. Fusce quis libero vel felis mollis eleifend in varius magna. Fusce porta hendrerit neque, ut eleifend augue ullamcorper lobortis. Proin massa massa, semper sit amet sapien ut, laoreet euismod diam. Proin vitae egestas tellus. 

	</div>
</section>	

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/smoothscroll.js"></script>
</body>
</html>

7
  • No tiene nada que ver con la propiedad offsetHeight sino con el objeto sobre el que la llamas que es nulo.
    – Lithorell
    el 14 jul. 2017 a las 10:35
  • Pero si yo tengo en el documento yo tengo #content-about #content-terms y #content-brand. ¿Cómo van a ser nulos? Chrome ya no acepta el offsetHeight github.com/jquery/jquery/issues/2889 el 14 jul. 2017 a las 10:40
  • El mensaje de error es clarisimo Cannot read property 'offsetHeight' of null eso significa que estas llamando a la propiedad offsetHeight de algo nulo
    – Lithorell
    el 14 jul. 2017 a las 10:46
  • Creo que viene porque en document.body.offsetHeight estas llamando a document.bodyantes de que se haya cargado todo y por lo tanto vale nulo. Tendrias que meterlo dentro del jQuery(document).ready(function($){...}
    – Lithorell
    el 14 jul. 2017 a las 10:48
  • Ya funciona para Chrome. Fue un error mío. Lo que sigo sin entender es por qué jamás me señala cuando estoy en el último div #content-brand. Solo apunta ahí cuando le doy click, al a href respectivo el 14 jul. 2017 a las 10:52

1 respuesta 1

1

Para que funcione el javascript hay que cambiar el orden de las condicionales, porque nunca "entraba" en el segundo else if ya que el primer if daba true.

document.getElementById("arrow").className += " active-info";

function arrowAbout(){
    document.getElementById("arrow-contact").className = "w-arrow-contact w-about";
}

function arrowTerms(){
    document.getElementById("arrow-contact").className = "w-arrow-contact w-terms";
}

function arrowBrand(){
    document.getElementById("arrow-contact").className = "w-arrow-contact w-brand";
}

var totalHeight = Math.max( document.body.scrollHeight, document.body.offsetHeight,  document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );

jQuery(document).ready(function($){
    $( window ).scroll(function() {
        if( (window.pageYOffset) == document.documentElement.scrollTopMax ){
            arrowBrand();
        }else if(  window.pageYOffset >= document.getElementById("content-about").offsetHeight && window.pageYOffset <= document.getElementById("content-brand").offsetHeight){
                arrowTerms();
        }else{
            arrowAbout();
        }
    });
});
1
  • Hola @MarisabelGC si esta es la respuesta correcta no olvides marcarla como tal, saludos.
    – Jorgesys
    el 7 sep. 2017 a las 16:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.