Как вы делаете div при прокрутке?

Ответ 1

Вы можете использовать свойство css Fixed, или если вам нужно что-то более точно настроенное, вам нужно использовать javascript и отслеживать свойство scrollTop, которое определяет, где находится полоса прокрутки пользовательского агента (0 находится наверху... и x находится внизу)

.Fixed
{
    position: fixed;
    top: 20px;
}

или с помощью jQuery:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});

Ответ 2

Вы можете использовать свойство позиции fixed CSS для выполнения этого. Существует базовый учебник по этому здесь.

EDIT: Однако этот подход НЕ поддерживается в версиях IE, IE7, и только в IE7, если он находится в режиме стандартов. Это обсуждается чуть подробнее здесь.

Существует также хак, объясненный здесь, в котором показано, как выполнить фиксированное позиционирование в IE6, не влияя на абсолютное позиционирование. Какую версию IE вы нацеливаете на свой сайт?

Ответ 3

С помощью стилизации из CSS вы можете определить, как что-то позиционируется. Если вы определяете элемент как фиксированный, он всегда будет оставаться в том же положении на экране в любое время.

div
{
    position:fixed;
    top:20px;
}

Ответ 4

Лучшим ответом JQuery будет:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()});
});

Вы также можете добавить число после scrollTop i.e.scrollTop() + 5, чтобы дать ему бафф.

Хорошим предложением было бы также ограничить продолжительность до 100 и перейти от колебания по умолчанию к линейному ослаблению.

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})

Ответ 5

свойство : фиксированное; должно работать, я использовал его на своем веб-сайте, и он работал нормально. http://www.w3schools.com/css/css_positioning.asp

Ответ 6

    For me this works:

        $(window).scroll(function(){
          $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
        });



    //////////////////Solution of another problem//////////////////////////////////
    /////////////////in jquery ajax get request to another page in parent page but html get but script not workig here///////





      I found another cause if you're developing under ASP.NET with Visual Studio 2013 or higher and are sure you didn't make any synchronous ajax requests or define any scripts in the wrong place.

        The solution is to disable the "Browser Link" feature by unchecking "Enable Browser Link" in the VS toolbar dropdown indicated by the little refresh icon pointing clockwise. As soon as you do this and reload the page, the warnings should stop!

        Disable Browser Link

        This should only happen while debugging locally, but it still nice to know the cause of the warnings.



        One can disable in web.config by adding <add key="vs:EnableBrowserLink" value="false" /> inside <appSettings> 



      $("#Selecter1").click(function () {




                $.ajax({
                    url: '/Students/Create',
                    type: "GET",
                    dataType: 'html',
                    success: function (responseText) {
                        $("#ContentCreatePage").html(responseText);
                        $("#ContentCreatePage").find("script").each(function () {

                            eval($(this).text());

                        });
                    }
                });


            });

////////Change Select options then change textbox text//////////////////


$('#quantity').change(function(){
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;
  $("#totalprice").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
        <input type="hidden" id="productPrice" value="340"/>
    Quantity: 
    <select id="quantity">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
Total: $
<input type="text" id="totalprice" value="340"/>


</div>