Скрытие меню после скролла в адаптивной верстке

164
15 ноября 2018, 08:40

В мобильной версии (при малом экране) после нажатия на пункт меню происходит скролл в нужный раздел сайта.

  1. Как скрыть развёрнутый список меню с экрана после клика по любому из его пунктов?

  2. Как задать координаты места? (куда заскролится экран)

$(document).ready(function(){ 
    var contentSection = $('.section'); 
    var navigation = $('.nav-wrap'); 
    var headerNav = $('.nav'); 
    var clientBlock = $('.client-item-wrap'); 
 
 
    navigation.on('click', 'a', function(event){ 
        event.preventDefault(); 
        smoothScroll($(this.hash)); 
    }); 
    headerNav.on('click', 'a', function(event){ 
        event.preventDefault(); 
        smoothScroll($(this.hash)); 
    }); 
    clientBlock.on('click', 'a', function(event){ 
        event.preventDefault(); 
        smoothScroll($(this.hash)); 
    }); 
 
 
    $(window).on('scroll', function(){ 
        updateNavigation(); 
    }); 
 
    updateNavigation(); 
 
    function updateNavigation(){ 
        contentSection.each(function(){ 
            var sectionName = $(this).attr('id'); 
            var navigationMatch = $('.nav-wrap a[href="#' + sectionName + '"]'); 
            if( ($(this).offset().top - $(window).height()/2 < $(window).scrollTop()) && 
                ($(this).offset().top + $(this).outerHeight() - $(window).height()/2 > $(window).scrollTop())) 
            { 
                navigationMatch.addClass('active-section'); 
            } 
            else { 
                navigationMatch.removeClass('active-section'); 
            } 
        }); 
    } 
    function smoothScroll(target){ 
        $('body,html').animate({ 
            scrollTop: target.offset().top - 50 
        }, 500); 
    } 
});

Answer 1

Вот код скролла до якоря

<section id="Ваш_якорь">Сюда нужно приехать</section>

<a href="#Ваш_якорь">Один из разделов меню</a>

$(document).ready(function(){ 
$("a[href*=#]").on("click", function(e){ 
    var anchor = $(this); 
    $('html, body').stop().animate({ 
        scrollTop: $(anchor.attr('href')).offset().top 
    }, 777); 
    e.preventDefault(); 
    return false; 
}); 
});

Чтобы по клику по якорю мобильное меню закрывалось, нужно прописать это (bootstrap 4)

$('.navbar-nav a').on('click', function() { 
    if ($('.navbar-toggler').css('display') != 'none') { 
    $(".navbar-toggler").trigger("click");

READ ALSO
Не выпадает подменю

Не выпадает подменю

Не выпадает подменю Bootstrap 3

257
Как добавлять пометки на картинку и сохранять их в БД?

Как добавлять пометки на картинку и сохранять их в БД?

Я хочу в книге делать мои пометки и комментарии и писать ответыКниги в pdf формате

288
Не правильная анимация на Bootstrap 4 карусель

Не правильная анимация на Bootstrap 4 карусель

При пролистывании карусели происходит как будто бы раздвоение конента с ужасным эффектом

182