Форум

Greatest_Duke · #1 (**permalink**) 04.01.2017, 14:21

Как сделать блок с position:fixed , который при скролле вниз будет подниматься наверх (скрываться), и при скролле вверх, если этот блок еще находиться в поле зрения пользователя, то будет опускаться вниз (наоборот показываться). Если есть плагины, реализующие данную идею, то прошу, скиньте их мне.

ksa · #2 (**permalink**) 04.01.2017, 14:29

Сообщение от Greatest_Duke

Как сделать блок с position:fixed , который при скролле вниз будет подниматься наверх (скрываться), и при скролле вверх, если этот блок еще находиться в поле зрения пользователя, то будет опускаться вниз (наоборот показываться).

Не совсем понятно, зачем такому элементу

position:fixed

Александр83 · #3 (**permalink**) 01.12.2017, 20:16

Здравствуйте! подскажите как сделать чтоб блок с классом aaa перемещался в блоке с классом bbb без выхода за его границы?, спасибо

<style type='text/css'>
.aaa{
       position: fixed;
       background: #fff;
       min-width: 338px;
       height: 348px;
       border: 1px solid #2992d9;
       border-radius: 3px;
       margin-left: 5px;
       display: block;
       top: 289px;
       z-index: 999;
}
.bbb{
    position: absolute;
    background: #f9f9f9;
    float: left;
    border: 1px solid #e5e5e5;
    margin-left: -245px;
    width: 350px;
    top: 29px;
    height: 1588.5px;
    z-index: 998;
}
  </style>

<div class="bbb">
<div class="aaa">плавающий банер</div>								
</div>

Александр83 · #4 (**permalink**) 02.12.2017, 19:37

рони,Dilettante_Pro,j0hnik, помогите пожалуйста?, с выше изложенным

рони · #5 (**permalink**) 02.12.2017, 20:49

Александр83,
https://abouolia.github.io/sticky-sidebar/

Александр83 · #6 (**permalink**) 02.12.2017, 21:24

рони,
ничего не пойму, можно на моем примере jQuery?

рони · #7 (**permalink**) 02.12.2017, 22:18

Александр83,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    position: relative;
  }

  .aaa{
       position:   absolute;
       background-color: #FFFF00;
       min-width: 338px;
       height: 348px;
       border: 1px solid #2992d9;
       border-radius: 3px;
       margin-left: 5px;
       display: block;
       top: 0px;
       z-index: 999;

}
.bbb{
    position:  relative;
    background-color: #f9f9f9;

    border: 1px solid #e5e5e5;
    margin-left: 245px;
    width: 350px;

    height: 1588.5px;
    z-index: 998;
}
p{

  height: 1000px;
  background-color: #A9A9A9;
}

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://abouolia.github.io/sticky-sidebar/js/sticky-sidebar.js"></script>

  <script>
$(function() {
var a = new StickySidebar('.bbb', {
			topSpacing: 20,
			bottomSpacing: 20,
			containerSelector: '.bbb',
            innerWrapperSelector: '.aaa'
		});

});
  </script>
</head>

<body>

<p></p>
<div class="bbb">
<div class="aaa">плавающий банер</div>
</div>
<p></p>


</body>
</html>

Александр83 · #8 (**permalink**) 03.12.2017, 00:11

рони,
спасибо!

skruglikov · #9 (**permalink**) 03.12.2017, 02:26

Посмотрите этот http://imakewebthings.com/waypoints/

Форум

Справочник

Discord чат

Курсы javascript