deshabilitar la escritura de la barra de navegación estática a fija en el dispositivo móvil

He estado trabajando en una barra de navegación / encabezado para mi sitio web. Cuando se desplaza 100px más allá del logotipo, la barra de navegación cambia a fija y se sienta en la parte superior.

Esto está muy bien, pero en ventanas pequeñas no quiero que haga esto, ya que tengo el logo escondido y la barra de navegación permanentemente fijada en la parte superior.

El problema es que cuando se desplaza hacia abajo todavía ejecuta el script y oculta la barra de navegación y luego vuelve a aparecer. Hice un bash inútil de agregar visualización: bloquear a la CSS cuando se veía con un ancho máximo de 768px, que no hizo mucho. ¿Cómo voy a no ejecutar este script en ventanas pequeñas o hay una mejor solución?

Aquí hay un jsfiddle, pruébalo en la vista móvil y desplázate hacia abajo.

Aquí está el código con el que estoy trabajando

$(window).scroll(function() { var nav = $('#custom-bootstrap-menu'); var body = $('body'); var top = 100; var logo = $('div#navlogo'); if ($(window).scrollTop() >= top) { nav.addClass('navbar-fixed-top'); body.addClass('padding-fifty'); logo.css('display', 'block'); } else { nav.removeClass('navbar-fixed-top'); body.removeClass('padding-fifty'); logo.css('display', 'none'); } }); 

¡Gracias chicos!

Editar: actualizó el violín. ¿Esto ayuda?

La idea es clonar una barra de navegación para su vista móvil y mostrarla solo en pantallas pequeñas y ocultar la otra barra de navegación.

https://jsfiddle.net/6gyc6aeq/

JS

 $(window).scroll(function() { var nav = $('#custom-bootstrap-menu'); var body = $('body'); var top = 100; var logo = $('div#navlogo'); if ($(window).scrollTop() >= top) { nav.addClass('navbar-fixed-top'); body.addClass('padding-fifty'); } else { nav.removeClass('navbar-fixed-top'); body.removeClass('padding-fifty'); } }); $("#mobile-only").html($("#custom-bootstrap-menu").html()); 

HTML

       

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND

CONTENT IS GRAND, MAN

CSS

 #logo { height: 100px; } .padding-fifty { padding-top: 50px; } .navbar-static-top #navlogo { display: none; } #custom-bootstrap-menu{ display :block; } #mobile-only{ display:none; } #custom-bootstrap-menu.navbar-fixed-top #navlogo{ display:block; } @media only screen and (max-width: 768px) { body{ padding-top: 50px; } #logo { display: none; } #navlogo { display: block; } #custom-bootstrap-menu{ display :none; } #mobile-only{ display:block; } }