Всегда видимый div при прокрутке - PullRequest
19 голосов
/ 24 января 2012

На моей странице aspx у меня есть две левые и правые части. Я хочу показывать всегда левую сторону (которая на самом деле является «деревом», содержащим древовидную структуру) при прокрутке правой стороны (которые являются фактическим содержимым страницы). Спасибо

Ответы [ 4 ]

19 голосов
/ 10 апреля 2013

Привет, я нашел лучшее решение!Как всегда JQUERY спасает мою жизнь !!

Просто поместите Div, называемый как вы, я выбрал то же самое в примере ниже: # scrollingDiv.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
    $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv");

        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() )}, "slow" );         
        });
    });
</script>

Я взял этот кодс веб-сайта, это работает, и это довольно легко понять.

17 голосов
/ 24 января 2012

Вам нужно поставить position: fixed; на элемент div. Это прикрепит его к окну просмотра.

3 голосов
/ 24 декабря 2014

Проблема в том, что когда блок перемещается, он получает внимание и способность сосредоточиться на чтении.

Чтобы исправить это с помощью этой функции.

Этот код идеально подходит:

(при необходимости измените "220" и "46px")

  var $scrollingDiv = $("#scrollingDiv");

$(window).scroll(function(){     
if ($(window).scrollTop()>220)       {
            $scrollingDiv
                .css("position",'fixed' )  
                .css("top",'46px' )           
        } else {
 $scrollingDiv
                .css("position",'' )    
                .css("top",'' )             
        }
        });
3 голосов
/ 24 января 2012

Вам нужно установить положение div в Fixed в CSS.См. эту ссылку для получения дополнительной информации.Вам нужно будет установить положение, используя верхнюю и левую сторону в css, чтобы он знал, где это исправить!

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