程序设计 fixed

23

我正在尝试使用以下方法修复一个问题div，使其始终停留在屏幕顶部： position: fixed; top: 0px; right: 0px; 但是，那 div位于内部居中容器中。当我使用position:fixed它时，它div相对于浏览器窗口进行了修复，例如它靠在浏览器的右侧。相反，它应该相对于容器固定。我知道 position:absolute可以用来相对于修复元素div，但是当您向下滚动页面时，该元素消失并且不会像那样粘在顶部position:fixed。是否有破解或解决方法来实现这一目标？

639 css position css-position fixed

6

粘边栏：向下滚动时固定在底部，向上滚动时固定在顶部

我一直在寻找一段时间，以解决粘性侧栏问题。我对自己的行为有一个特定的想法；实际上，当您向下滚动时，我希望它粘在底部，然后当您向上滚动时，我希望它以流畅的运动（不跳动）粘在顶部。我找不到我要实现的目标的示例，因此我创建了一个图像，希望可以更清楚地说明这一点：边栏位于标题下方。向下滚动时，侧栏保持与页面内容的水平，以便您可以滚动浏览侧栏和内容。到达侧边栏的底部，侧边栏将粘在视口的底部（大多数插件仅允许粘在顶部，有些插件允许粘在底部而不是两者都允许）。到达底部，侧边栏位于页脚上方。向上滚动时，侧边栏与内容保持水平，因此您可以再次滚动浏览内容和侧边栏。到达侧边栏的顶部，侧边栏粘贴到视口的顶部。到达顶部，边栏位于标题下方。我希望这是足够的信息。我创建了一个jsfiddle来测试所有插件/脚本，对此问题我已对其进行了重置：http : //jsfiddle.net/jslucas/yr9gV/2/ .

94 jquery position fixed sidebar sticky

9

固定了带水平滚动条和垂直滚动条的标题表

我一直试图找出这个问题，我有html / css粘页眉+滚动条。我们正在创建一个程序，当容器大小达到某个点时（取决于用户的分辨率），该程序需要滚动条才能显示。我在表的第二列上强制使用最小宽度，因此表在特定点处停止减小，并强制容器保持在特定宽度。容器上的溢出显示水平滚动条。一切正常。一旦我添加了第二个滚动条进行垂直滚动，事情就变得一团糟。有人对此问题有解决方案吗？我想在.table-body上有一个垂直滚动条，但是滚动条必须在externalcontainer上可见。固定头表是否有很好的html / css解决方案？我已经搜索了一个星期，但是只能找到这种行为的jQuery插件。这是我当前的HTML： <!DOCTYPE html> <html> <head> <title>fixed header prototyping</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="outer-container">  <div class="inner-container"> <div class="table-header"> <table id="headertable" width="100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="header-cell col1">One</th> <th class="header-cell col2">Two</th> <th class="header-cell col3">Three</th> <th class="header-cell col4">Four</th> …

68 html css header html-table fixed

6

将滚动内容定位在固定的flexbox导航菜单下

我有以下代码段（需要以全屏模式查看），我试图将<main>元素直接放置在元素下方<header>。我将<header>其固定在一个位置，因为当用户滚动浏览内容时，我希望它停留在屏幕顶部<main>元素中。我已经尝试了所有我知道的东西，但是我能想到的最好的办法是将该<header>元素放在该元素的顶部<main>，这样可以减少大部分内容。我想出的最接近的解决方案是在<main>元素上加上一个推测的顶部填充，以便清除<header>。但是，此解决方案无法很好地说明各种屏幕尺寸，因为我使用的是rem sizing而不是px。当将多个元素放置在<header>使用相对或基于百分比的高度的元素内时，顶部填充的想法变得更糟。在一个屏幕尺寸上，所有内容都可以完美地排列在一起；在另一个屏幕尺寸上，内容可能相去甚远。最后，我知道我可以使用jQuery动态设置顶部填充，但是它似乎并不总是能很好地工作。想知道是否有一个纯CSS / HTML解决方案。谁能告诉我我在这里想念的东西吗？我的最佳填充方法是唯一可行的解决方案吗？ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li > a").click(function(e) { if (window.innerWidth <= …

15 html css css-position fixed

Questions tagged «fixed»