边缘顶部需要调整到它在jquery中的位置答案

【问题标题】：Margin top need to be adjusted to its position in jquery边缘顶部需要调整到它在jquery中的位置
【发布时间】：2015-06-11 12:35:17
【问题描述】：

我有以下页面，在右侧，有一个应该始终保留在顶部的框，我的意思是，即使我们向下滚动时，该框也应该在顶部。但是，我试图通过 Jquery 通过计算和调整绿色浮动框的 margin-top 值 [右上图] 而不是 position:fixed 来实现这一点

请注意：我不想通过 CSS 使用 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'));
    }
});

我正在苦苦挣扎，不知道该怎么办？有什么帮助吗？

【问题讨论】：

请包含 CSS。可以在此处找到启动 JSFiddle：jsfiddle.net/c5gnpbs4。您想要实现的目标也可以使用 CSS 来完成。
这样的事情怎么样：jsfiddle.net/c5gnpbs4/1

标签： jquery html

【解决方案1】：

试试这个：

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

这是为此工作的fiddle。

【讨论】：

【解决方案2】：

固定浮动框并使用顶部 css。

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

【讨论】：