相对于窗口的位置 [英] Position Relative to the window

问题描述

我有一个Tumblr帐户，我正在编辑它的html.我的问题是:如何使侧边栏处于某个位置，但随后我在页面上向下滚动，使其停留在相对于浏览器的位置?有关我在说什么的示例，请单击问一个问题"并查看类似问题"，然后滚动.我希望它在CSS中.我已经尝试了所有我能想到的东西.

I have a Tumblr account and I'm working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then I scroll down on the page, it stays where it is relative to my browser? For an example of what I'm talking about, click "ask a question" and look at "similar questions" then scroll. I would prefer for it to be in CSS. I have already tried everything I can think of.

推荐答案

将元素css position 属性设置为 fixed 和用户 top / left 和 margin 将其放置在您想要的位置.像这样:

set the elements css position attribute to fixed and user top/left and margin to place it where you want it to be. Like so:

#sideBar {
    position: fixed;
    display: block;
    top: 50%;
    left: 10px;
    margin: -100px 0 0 0;
    height: 200px;
    width: 50px;
}

上面的代码将垂直对齐 200px 高div并将其放置在距左侧边框 10px 的位置.

The above code would vertically center a 200px high div and place it 10px from the left hand border.

更新

该示例将向您展示如何实现自己的目标！具有jemo的演示

This example will show you how to achieve what you're after! Demo with jquery

更新(1)

下面的jquery代码可能是对其他html/css进行最小更改的最快方式来实现所需的目标.只需将以下代码粘贴到准备就绪函数中，并按如下所述更改css的几位内容即可.

The following jquery code is probably the fastest way to achieve what you want with minimal changes to other html/css. Just stick the following code in a document ready function and change the few bits of css as stated below.

$(window).scroll(function(){
    if($(window).scrollTop() >= 200){
        $('anchor3').css({
            "margin-top": "80px"
        })
        $('icon').css({
            "margin-top": "10px"
        })
        $('oldurl').css({
            "margin-top": "296px"
        })
    }
    else{
        $('anchor3').css({
            "margin-top": 300 - $(window).scrollTop()
        })
        $('icon').css({
            "margin-top": 230 - $(window).scrollTop()
        })
        $('oldurl').css({
            "margin-top": 516 - $(window).scrollTop()
        })
    }    
})

您需要将CSS更改为 a3text ，以使 margin-top:60px ，删除 position 和 margin-left属性，然后添加 display:block

You need to change the CSS for a3text to make margin-top:60px, remove the position and margin-left attributes, then add display: block

理想情况下，您只需要在一个容器 div 中包含 icon ， anchor3 和 oldurl 只能在容器上使用jquery，而不是单独使用三个项目！

Ideally, you would just have icon, anchor3, and oldurl inside one container div so that you could just use jquery on the container rather than the three items individually!

但这应该可以为您带来帮助(使用FF Scratchpad在实时tumblr网站上进行了测试).

But this ought to get you what you're after (tested on the live tumblr site with FF Scratchpad).

更新(2)

启动Firefox，然后转到页面: http://thatoneguyoveryonder.tumblr.com/然后打开便笺簿(SHIFT + F4)复制/粘贴以下代码，然后按CTRL + L.然后，它应该说(在便签本中)类似/* [object Object] */的内容.如果发生这种情况，请向下滚动网页并观看魔术发生的情况-如果这是您想要的，我会在后面解释为您实现:)

Launch firefox and go to the page: http://thatoneguyoveryonder.tumblr.com/ then open scratchpad (SHIFT + F4) copy/paste the following code and press CTRL+L. It should then say something (in scratchpad) like /* [object Object] */ If that happens scroll down the webpage and watch the magic happen - if this is what you're after I'll explain implementing it for you :)

$('#sidebar').css({
    position:'fixed',
    top:410,
    left:700 + 60 + (($(window).width()-940) / 2),
    "z-index":900
});

$(window).scroll(function(){
    if($(window).scrollTop() >= 370){
        $('#sidebar').css({
            top: '30px'
        })
    }
    else{
        $('#sidebar').css({
            top: 410 - $(window).scrollTop()
        })
    }
})

这篇关于相对于窗口的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！