javascript slice - ¿Desea desplazarse JQuery a Offset desde la parte superior del navegador?



splice string (4)

El Código está bien, solo necesita eliminar la altura de su encabezado fijo aquí, por ejemplo, si es 200px. funcionará perfectamente

 $('html,body').animate({scrollTop: (targetOffset().top)-200}, 1000);

También puede comprobar esto cuando se hace clic en un botón

$(function() {

$('a[href*=#]:not([href=#])').click(function() {

    // Check height of the header and padding
    var header_height = $('.header').outerHeight();

Quítalo de tu offset

$('html,body').animate({scrollTop: (targetOffset().top) - header_height }, 1000);

Tengo la siguiente secuencia de comandos de desplazamiento, que se desplaza alrededor de la página bien, funciona exactamente como lo quiero también.

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

Sin embargo, lo necesito para ignorar la parte superior, por ejemplo, 200 px, ya que tengo un encabezado fijo en la parte superior de la página donde el contenido se desplaza hacia atrás.

Lo que significa que cuando me desplazo hacia arriba, desplaza el contenido hasta detrás del encabezado fijo, por lo que no puedo verlo, por lo que necesito desplazarme hacia abajo justo debajo del encabezado. suponer....

¿Se puede hacer esto como sería muy útil?

Muchas gracias por cualquier ayuda


Algo como esto funcionaría?

var targetOffset = $target.offset().top - 200;

O tome la altura del elemento de cabecera para el desplazamiento adicional.

var targetOffset = $target.offset().top - $("element").outerHeight(true);

Usted podría usar algo como esto si la condición en su código para hacer eso

//check if the absolute position is below header
if ($('#IdOfTheScrollElement').position().top >= 200 ){
//scroll
}
else {
//do nothing
}

AngularJS y jQuery:

AngularJs y JQuery son completamente diferentes en todos los niveles, excepto la funcionalidad JQLite, y lo verás una vez que comiences a aprender las características principales de AngularJs (lo explico a continuación).

AngularJs es un marco del lado del cliente que ofrece construir la aplicación del lado del cliente independiente. JQuery es una biblioteca del lado del cliente que juega alrededor del DOM.

Principio fresco de AngularJs: si desea algunos cambios en su interfaz de usuario, piense desde la perspectiva del cambio de datos del modelo. Cambia tus datos y la interfaz de usuario se volverá a representar. No es necesario jugar con DOM cada vez, a menos que sea necesario, y eso también debe manejarse a través de directivas angulares.

Para responder a esta pregunta, quiero compartir mi experiencia en la primera aplicación empresarial con AngularJS. Estas son las características más asombrosas que proporciona Angular donde comenzamos a cambiar nuestra mentalidad de jQuery y obtenemos el Angular como un marco y no la biblioteca.

El enlace de datos bidireccional es asombroso: tenía una cuadrícula con todas las funciones ACTUALIZAR, ENCONTRAR, INSERTAR. Tengo un objeto de datos que une el modelo de la cuadrícula usando ng-repeat. Solo necesitas escribir una sola línea de código JavaScript simple para eliminar e insertar y eso es todo. La cuadrícula se actualiza automáticamente a medida que el modelo de cuadrícula cambia instantáneamente. La funcionalidad de actualización es en tiempo real, no hay código para ello. ¡¡¡Te sientes increíble!!!

Las directivas reutilizables son super: escriba directivas en un solo lugar y úselas en toda la aplicación. ¡¡¡DIOS MIO!!! Utilicé esta directiva para paginación, expresiones regulares, validaciones, etc. ¡Es realmente genial!

El enrutamiento es sólido: depende de su implementación cómo desea usarlo, pero requiere muy pocas líneas de código para enrutar la solicitud para especificar HTML y controlador (JavaScript)

Los controladores son excelentes: los controladores se encargan de su propio HTML, pero esta separación funciona bien para la funcionalidad común. Si desea llamar a la misma función con el clic de un botón en el HTML maestro, simplemente escriba el mismo nombre de función en cada controlador y escriba un código individual.

Complementos: hay muchas otras características similares, como mostrar una superposición en su aplicación. No necesita escribir código para ello, solo use un complemento de superposición disponible como wc-overlay, y esto se encargará automáticamente de todas las solicitudes XMLHttpRequest (XHR).

Ideal para arquitectura RESTful : ser un marco completo hace que AngularJS sea ideal para trabajar con una arquitectura RESTful. Llamar a las API REST CRUD es muy fácil y

Servicios : Escriba códigos comunes usando servicios y menos código en los controladores. Los servicios pueden usarse para compartir funcionalidades comunes entre los controladores.

Extensibilidad : Angular ha ampliado las directivas HTML utilizando directivas angulares. Escribir expresiones dentro de html y evaluarlas en tiempo de ejecución. Cree sus propias directivas y servicios y utilícelos en otro proyecto sin ningún esfuerzo adicional.





javascript jquery