向右滚动时,div 停在屏幕左侧

发布于 2025-01-03 17:33:33 字数 283 浏览 5 评论 0原文

我有一个关于 jQuery/css 的快速问题。我正在编写一个网站,并且有一个灰色框,其中包含内容/链接,当用户向右滚动时,我想将其粘贴到屏幕的左侧。我已经浏览了很多论坛/教程,但仍然找不到我的解决方案。这是该网站的链接。

我在 jQuery 方面是个新手,所以任何帮助将不胜感激,谢谢!

http://morseandcompany.com/index-TEST.html

I have a quick jQuery/css question. I am coding a site and have a grey box that will have content/links inside of it that I want to stick to the left side of the screen when the user scrolls right. I've gone through a bunch of forums/tutorials but still can't find my solution. Here is a link to the site.

I'm rather a novice when it comes to jQuery so any help would be greatly appreciated, thanks!

http://morseandcompany.com/index-TEST.html

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

人心善变 2025-01-10 17:33:33

编辑:

这应该是您的文档准备脚本:

$(document).ready(function() 
{
    var theLoc = $('#sidebar').position().left;
    $(window).scroll(function() {
    if(theLoc >= $(window).scrollLeft()) {
        if($('#sidebar').hasClass('fixed')) {
            $('#sidebar').removeClass('fixed');
        }
    } else { 
        if(!$('#sidebar').hasClass('fixed')) {
            $('#sidebar').addClass('fixed');
        }
    }
});
});

将其添加到您的 CSS:

.fixed {position:fixed !important; left:0px !important;}

并将 #sidebar 的 CSS 更改为:

#sidebar {
min-height:100%;
width:266px;
height:100%;
height: auto !important; /*for modern browsers */ 
background-color:#F2F2F2;
z-index:2;
} 

并将侧边栏的 HTML 更改为:

<DIV ID="sidebar" style="position:absolute; left:765px;"></DIV>

EDIT:

This should be your document ready script:

$(document).ready(function() 
{
    var theLoc = $('#sidebar').position().left;
    $(window).scroll(function() {
    if(theLoc >= $(window).scrollLeft()) {
        if($('#sidebar').hasClass('fixed')) {
            $('#sidebar').removeClass('fixed');
        }
    } else { 
        if(!$('#sidebar').hasClass('fixed')) {
            $('#sidebar').addClass('fixed');
        }
    }
});
});

Add this to your CSS:

.fixed {position:fixed !important; left:0px !important;}

And change the CSS for your #sidebar to:

#sidebar {
min-height:100%;
width:266px;
height:100%;
height: auto !important; /*for modern browsers */ 
background-color:#F2F2F2;
z-index:2;
} 

And change the HTML for the sidebar to:

<DIV ID="sidebar" style="position:absolute; left:765px;"></DIV>
差↓一点笑了 2025-01-10 17:33:33

访问您的网页时,我收到此错误:

var docScrollRight = $('body,html').scrollRight();
                                    ^^^^^^^^^^^

这不是 jQuery 函数。尝试scrollLeft()。

When visiting your webpage, I get this error:

var docScrollRight = $('body,html').scrollRight();
                                    ^^^^^^^^^^^

That isn't a jQuery function. Try scrollLeft().

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文