2

Добрый день!

Подскажите, пожалуйста, как реализовать на сайте механизм появления элемента при прокрутке экрана - элемент движется по горизонтальной оси (с права налево, или наоборот), в зависимости от прокрутки экрана вверх или вниз, при этом используется стиль visibility. Данный механизм реализован на сайте: mhmgroup.ae Есть похожий код, но в нем элемент будет просто появляться и исчезать, но я никак не могу найти решение для необходимой мне цели:

jQuery(function(f) {
  var element = f('#back-top');
  f(window).scroll(function() {
    element['fade' + (f(this).scrollTop() > 200 ? 'In' : 'Out')](500);
  });
});

Спасибо !

3
  • Вам необходимо, чтобы элемент перемещался по горизонтали на определённое расстояние в соответствии с шагом прокрутки?
    – Romanzhivo
    4 июл 2016 в 8:13
  • @PeterSmith, добрый день! все верно. Возможно мне подойдет css-анимация?
    – Artem
    4 июл 2016 в 10:08
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 5 июл 2016 в 4:15

1 ответ 1

4

Если правильно вас понял, то вам нужен такой вариант:

<style>
    body {
        margin: 10px;
    }
    .wrapper {
        width: 100%;
        height: 100%;
    }
    .scrolled-block {
        height: 3000px;
    }
    .moved-element {
        display: none;
        position: fixed;
        bottom: 20px;
        width: 50px;
        height: 20px; 
        background-color: #323232;
    }
</style>

<div class="wrapper">
    <div class="scrolled-block"></div>
    <div class="moved-element"></div>
</div>

<script type="text/javascript">
    var element = $('.moved-element');
    var elementWidth = element.width();
    var body = $('body');
    var bodyHeight = body.outerHeight(true);
    var scrolledBlock = $('.scrolled-block');
    var sbWidth = scrolledBlock.width();
    var winHeight = $(window).height();
    var maxScroll = bodyHeight - winHeight;
    var coeff = maxScroll/(sbWidth-elementWidth);

    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var move = scrollTop / coeff;
        element['fade' + (scrollTop > 200 ? 'In' : 'Out')](500);
        element.css('marginLeft', move);
    });
</script>

https://jsfiddle.net/Romanzhivo/ntnhd3v5/7/

1
  • большое спасибо за Ваши старание. Я пытаюсь сделать сайт для себя, навыков программирования у меня практически нет. Буду пробовать, пока, что элемент (картинка) висит на месте (движения вправо нет), но исчезает по мере прокрутке страницы вниз.
    – Artem
    5 июл 2016 в 8:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.