Вывод div на экран при прокрутке пользователем

#javascript #css

Вопрос:

Я хочу, чтобы мой div right отображался на экране, когда пользователь прокручивает. Это пример ситуации:https://jsfiddle.net/gwjehuzf /

Я много пробовал, но безуспешно. Что-то вроде этого:

 $(window).scroll(function () {

    if ($(document).scrollTop() > 400) {
        console.log("a");
        var newPos = $(document).scrollTop()   400;
        $('.right').css({ top: newPos });
    }

    else {
        $('.right').css({ top: 400 });
    }
})

по какой-то причине не работает. Есть идеи?

1. укажите CSS position: fixed , и он должен работать

2. @JoykalInfotech это не так. График исчезает после добавления fixed .

3. Вы пробовали использовать position: sticky?

4. позиция: sticky; top: 0;

5. эффект зависания @godfather и зависания сверху: jsfiddle.net/oLh6n3mj

Ответ №1:

просто используйте css .right{позиция:липкая; верх:0; переполнение: скрытое;}

1. Почему при таком наведении эффект не применяется? jsfiddle.net/oLh6n3mj

2. я думаю, что его перекрывающаяся попытка добавить переполнение: скрыто;

3. Вы можете добавить демо для более подробного объяснения

4. вы можете протестировать код на jsfiddle, вы увидите, что у него есть значки под глазами, которые он имел в виду, когда эффект наведения не применялся

5. привет, @ dafie, помог ли тебе мой ответ?

Ответ №2:

Просто нужно добавить несколько CSS, мы решим вашу проблему. Спасибо

 .right {
  position: fixed;
  right: 0;
  width: calc(100% - 200px);
}

Ответ №3:

Добавьте этот css в свой код

 .right {
   position: sticky; 
   top: 5px; 
}

1. Sticky еще не поддерживается корректно всеми основными браузерами, обратитесь к его таблице caniuse : caniuse.com/#search=sticky . Я бы предложил использовать position: fixed вместо этого.

2. Почему при таком решении эффект наведения не применяется? jsfiddle.net/oLh6n3mj

Ответ №4:

Для этого не требуется JavaScript. Используйте position: fixed для .right div.
Если он исчезнет, придайте ему ширину (возможно, около 80%) и right: 0 :

 .right {
    position: fixed;
    width: 80%;
    right: 0;
}

Ответ №5:

Вы можете добиться этого путем добавления position: sticky в .right и настройки top: 0 .

 .right {
  position: fixed;
  top: 0;
}

Ваш JSFiddle исправлен здесь.

1. Кажется, это работает, но у меня другая проблема — почему эффект наведения не виден на изображении? Без position и right наведения курсора работает должным образом: jsfiddle.net/oLh6n3mj

2. Это решение, похоже, приводит к сбою при наведении курсора: jsfiddle.net/oLh6n3mj