保证金顶部需要调整到jquery中的位置

Question

我有以下页面，在右侧，有一个盒子应该始终保留在顶部，我的意思是，甚至，当我们向下滚动时，盒子应该在顶部。但是，我尝试通过计算和调整绿色浮动框的margin-top值[图片右上方]而不是position:fixed

来通过Jquery实现这一点。

请注意：我不希望通过使用position: fixed来实现此目的。我想通过Jquery Stuff实现这一目标。

HTML代码

<div class="mainBox">
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>
        <img src="file://D:/fonts/Grenn.jpg"/>
    </p>
    <p>Paragraph</p>
    <p>
        <img src="file://D:/fonts/Grenn.jpg"/>
    </p>
    <p>
        <img src="file://D:/fonts/Grenn.jpg"/>
    </p>
    <p>
        <img src="file://D:/fonts/Grenn.jpg"/>
    </p>
    <p>
        <img src="file://D:/fonts/Grenn.jpg"/>
    </p>
</div>

<div class="floatBox">
    <p>Sample text for floating text across pages in all the scrollbars</p>
</div>

CSS

.floatBox {
border: 2px solid green;
width: 190px;
padding: 10px;
position: relative;
float: right;
margin-top: -2300px;
}

Jquery的

var boxSize = parseInt($('div.floatBox').css('margin-top'));

$(window).scroll(function() {
    var height = $(window).scrollTop();

    console.log(boxSize + 50);

    if(height < $(document).height()){
        var termp = boxSize + "px";
        console.log(termp + "temp");
        $('div.floatBox').css('margin-top', boxSize + 50 + "px");
        boxSize = parseInt($('div.floatBox').css('margin-top'));
    }
});

我正在努力并且出于想法我应该做什么？有什么帮助吗？

Answer 1

试试这个：

$( window ).scroll(function() {
     var height = $(window).scrollTop();
     var top = $(window).scrollTop();
    $('.floatBox').css({'margin-top': top + 'px'});
});

这是fiddle的工作原理。

Answer 2

使floatBox固定并使用top css。

.floatBox{
  position:fixed;
  top:30px;
  right:0px;
}