динамическое позиционирование элемента - PullRequest
Новая
       0

динамическое позиционирование элемента

4 голосов
/ 14 июня 2010

Я видел эту вещь месяцами и годами, и я действительно хочу знать, как это сделать.

Например, в середине страницы есть элемент.и это в абсолютном положении.Когда прокрутка вниз и доходит до этого элемента, он становится фиксированным и следует за прокруткой, когда прокрутка вверх и обратно к середине страницы снова становится абсолютной.на странице кампаний заголовок ваших ключевых слов - это то же самое.

как это сделать?

спасибо

Ответы [ 2 ]

3 голосов
/ 16 июня 2010

Примерно так (проверено на Chrome) будет работать: 

<html>
<head>
<title>Example</title>
<style>
        .banner {position: absolute; top: 40px; left: 50px; background-color:cyan}
</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
    <script type="text/javascript" >
$(function()  {
$(window).scroll(function()   {
    var top = $(window).scrollTop();
    if (top < 40) top= 40;
    $('.banner').css({top: top})
    })
})
    </script>
</head>
<body>
<div class="banner">This is the banner</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/><br/><br/> Cras rhoncus euismod sagittis.<br/><br/><br/> Fusce tincidunt consectetur ante eu commodo.<br/><br/><br/> Fusce lacinia consectetur nulla sit amet mattis.<br/><br/><br/> In viverra bibendum nibh vitae pharetra.<br/><br/><br/> Nam non eros semper ipsum facilisis fringilla.<br/><br/><br/> Phasellus sit amet purus interdum arcu hendrerit sagittis.<br/><br/><br/> Sed fermentum, orci non tincidunt pellentesque, tellus ipsum ultrices dui, at venenatis mi turpis non odio.<br/><br/><br/> Etiam elementum massa eu libero molestie nec pulvinar lacus suscipit.<br/><br/><br/> Etiam erat massa, mattis et sollicitudin eu, posuere commodo ligula.<br/><br/><br/> Vestibulum nec sem arcu.<br/><br/><br/> Vestibulum justo risus, feugiat at tristique a, sagittis vel dui.<br/><br/><br/> Sed enim erat, scelerisque sit amet accumsan scelerisque, vestibulum vitae dui.<br/><br/><br/> Integer et orci enim.<br/><br/><br/> Aliquam est mauris, consequat sed egestas vitae, scelerisque non sapien.<br/><br/><br/> Nam feugiat diam eu elit dignissim commodo.<br/><br/><br/> Curabitur eleifend lacus a leo vehicula rhoncus.<br/><br/><br/> Fusce luctus antequis urna sodales vestibulum.<br/><br/><br/> Aliquam tempus nisl vitae arcu bibendum sollicitudin.<br/><br/><br/>
</body>

Редактировать: расположение элемента 40 px под заголовком, но сделать его видимым, если пользователь прокрутит вниз

0 голосов
/ 14 июня 2010

Вы можете сделать это с любым элементом, применив css: 

#keepmefixed{
  position:fixed;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...