@Alex_vs_Predator
Начинающий веб-разработчик

Фиксированная шапка сайта, при скроле по id, залезает на секцию со встречным id. как исправить?

Доброe времени суток!
Возможно кто сталкивался с такой причиной!?
Делаю лендинг, шапка сайта фиксированная и при нажатии на меню, должна скроллить в низ по id.

Столкнулся с тем, что по нажатию шапка скроллит в низ, но наезжает на встречную секцию(((
Сама шапка 125рх, то есть эти 125рх наезжают на секцию (место прибывания)

Вот основной спритп фиксирования:
var top_show = 125;
    $(document).ready(function() {
        if ($(this).scrollTop() > top_show){
            $('header').css("position","fixed");
        }
        else{
            $('header').css("position","relative");
        }
        $(window).scroll(function () {
            if ($(this).scrollTop() > top_show){
                $('header').css("position","fixed");
            }
            else{
                $('header').css("position","relative");
            }
        });
    });


Вот дописал еще один, чтобы при скроле, было -125рх.
Т.е. чтобы шапке не заежала на секцию

<script>
    $(document).ready(function(){
        $('.menu ul li a').click(function(){
            elementClick = $(this).attr('href');
            destination = $(elementClick).offset().top-125;
            if ($.browser) {
                $('body').animate({scrollTop: destination}, 1000);
            }
            else {
                $('html').animate({scrollTop: destination}, 1000);
            }
            return false;
        });
    });
</script>


Но почему то не всегда срабатывает и периодически пишет ошибку на
destination = $(elementClick).offset().top-125; //на сам .top


Подскажите, пожалуйста, может есть другое решение???
  • Вопрос задан
  • 978 просмотров
Решения вопроса 1
@be_a_man
1. Непонятно зачем скриптами фиксить панель, когда это делается c помощью CSS.
position: fixed на панель,
а на body padding-top: 125px

2.
$('.menu ul li a').click(function(){
	var el = $(this).attr('href');
	$('html,body').animate({
		scrollTop: $(el).offset().top - $("header").height()}, 1000);
	return false;
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 мая 2022, в 16:36
7500 руб./за проект
27 мая 2022, в 16:24
164000 руб./за проект
27 мая 2022, в 15:53
5000 руб./за проект