标签: sticky

我有一个网站,我需要在可见页面的底部有一个图像.因此,在任何屏幕尺寸中,图像仍然位于底部,并居中.

我一直在玩tkinter,我无法弄清楚为什么"粘性"属性似乎不适用于我的按钮.我已指定粘贴为NW,这会导致我的按钮粘在左上边缘但由于某种原因它粘在右上角.知道为什么吗？

from tkinter import *
from tkinter import ttk

def test():
    name = userName.get()
    text = "Hello {0}! Pleased to meet you.".format(name)
    greeting.set(text)

window = Tk()

greeting = StringVar()
userName = StringVar()

name = Entry(window, textvariable=userName)
name.grid(column=1, row=1, sticky=NW)

button = Button(window, text="greeting", command=test)
button.grid(column=2, row=1, sticky=NW)

label = Label(window, textvariable=greeting)
label.grid(column=1, row=2, sticky=NW)

#creating a rectangle
canvas = Canvas(window)
canvas.grid(column=1, row=2)
#attributes are x,y coordinates of two points
x = canvas.create_rectangle(5,5,115,115)    

mainloop()

我正在使用(粘性)滚动侧边栏.问题是大多数粘性侧边栏没有考虑边栏可能比视口高(例如,如果很多项目被添加到篮子(侧边栏)).这就是我想要解决的问题.这些是要求:

• 如果侧边栏的高度比视口高,则应滚动内容,并且当向下滚动时,div的底部应粘贴到视口的底部.

• 如果侧边栏的高度比视口高,则只有当您位于页面底部时才会显示下面的div.

• 当用户向上滚动时,侧边栏会向后滚动到顶部并回到视口的顶部.

• 如果侧边栏的高度小于视口,则向下滚动时顶部应该是粘性的.

总而言之,相当一些功能而不是那么简单(我认为).我见过的最接近我想要实现的是这个例子:http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php但是编写代码的方式不合适进入我的.

到目前为止,这就是我所做的:DEMO

我使用的jQuery代码:

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            if ($content.height() > $sidebar.height()) {
                var new_margin = $window.scrollTop() - offset.top;
                if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
                    // Following the scroll...
                    $sidebar.stop().animate({ marginTop: new_margin });
                } else if (($sidebar.height()+new_margin) > $content.height()) …

我有一个特定的问题,用jQuery制作一个粘性标头.我尝试了网络上常用的片段,但我到处都看到了同样的错误.

在特定的文档高度(可滚动直到调用粘性效果),粘性标题在position: fixed和之间跳转position: static.

HTML:

<header>
  <div id="not-sticky"></div>
  <div id="sticky"></div>
</header>
<div id="content"> ...

jQuery的:

var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
  windowTop = $(window).scrollTop();
  if (windowTop > stickyTop) {
    $sticky.css({
      position: 'fixed',
      top: 0
    });
  }
  else {
    $sticky.css({
      position: '',
      top: ''
    });
  }
});

CSS:

header {
  width: 100%;
}

#not-sticky {
  padding: 50px 0;
  width: 100%;
}

#sticky {
  padding: 24px …

我正在编码位于移动屏幕底部的粘性通知栏。我希望将条形图停留在用户屏幕的底部，直到用户到达代码中条形图实际所在位置的滚动位置为止（该位置恰好在页面页脚之前）。我已经从此页面复制了“医生”示例：https : //alligator.io/css/position-sticky/ 我的问题是：在页面上，使用Android设备或通过调整台式机上的浏览器宽度来模拟移动设备时，该栏都可以正常工作。但是，在iOS上，该条不是粘性的，即，它只是位于其位置，直到到达它才粘在屏幕底部。这适用于Safari和Google Chrome。奇怪的是：在前面提到的alligator.io页面上，它在我的iOS设备上运行正常。

我怀疑这是某种Webkit问题，与工具栏周围的代码有关，但是我无法隔离它。我尝试通过尽可能地将代码调整到alligator.io中的示例来调试，但是我无法使其正常工作。我也尝试过在父元素中寻找任何溢出：自动-没有成功。我已经尝试解决了几个小时，对此问题感到厌倦，可以用另一双眼睛帮助我找到我所忽略的东西。

<a href="#" class="jobAlertToggle">
    <div id="jobalarm_mobile">
        <i class="fa fa-bell"></i>
        <span>Jobalarm aktivieren</span>
        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>
</a>

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

您可以访问我正在处理的实时页面（应客户要求隐藏，请私下与我联系）。只需开始任何（建议的）搜索，该栏就会弹出（或者，如果您使用的是iOS，则不会弹出...）。预先感谢您的帮助。

我需要在已position: sticky设置的元素上显示下拉内容。不幸的是，操纵并z-index没有多大帮助。悬停时显示的内容仍被下一个粘性元素覆盖。

展示多个小程序问题的完整示例：https://jsfiddle.net/tfkh2v0n/3/

最小的例子：

.applet-container {
  position: relative;
  z-index: 1;
}

.applet {
  position: relative;
  z-index: 2;
}

.sticky-header {
    top: 0px;
    position: sticky;
    background: #d1d1d1;
    z-index: 3;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 4;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: gold;
  min-width: 160px;
  z-index: 5;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 5;
}

<div class="applet-container">
  <div …

可能已经有一个jQuery插件可以实现这一点,但我找不到一个完全按照我所做的去做.如果有,请指教我,谢谢.

我的问题是我有很长的页面内容,当您在页面底部滚动时,我的侧边栏不可见.

因此,当您向上和向下滚动页面时,我想让我的#sidebar div保持在浏览器窗口的顶部和底部.

我的侧边栏高度比典型的屏幕分辨率长,所以我需要侧边栏的底部粘在浏览器窗口的底部以及浏览器的顶部.

所以,当你开始向下滚动,侧栏将滚动像正常的,但是当你到达终点的侧边栏,它坚持并不会滚动,而当你开始向上滚动,侧边栏会跟随,直到侧边栏到达顶部浏览器,然后它坚持.反之亦然.

这可能吗？

我已经创建了一个简单的设计布局的jsfiddle,它是核心.我在边栏上添加了一个虚线边框,所以你现在应该选择侧边栏.

http://jsfiddle.net/motocomdigital/7ey9g/5/

任何建议,或者你知道在线教程或演示,都会非常棒!

UPDATE

请看@Darek Rossman的这个尝试

http://jsfiddle.net/dKDJz/4/

他有基本的想法.但向上滚动会使其突然移动到顶部.我需要使用向上/向下滚动的侧边栏来保持流畅.但坚持窗户的顶部或底部.当页眉/页脚在视口中时,它也不应固定定位,因此它不会重叠.

谢谢

我们的应用程序需要基于cookie的粘性会话,因此我们希望使用HAproxy来平衡到IIS服务器场的传入流量.

我们使用以下配置似乎在实验室工作(循环工作正常和会话保留),但在生产中应用超过3k并发用户时失败:

前端Front_http

bind :80
mode http
default_backend backend_http
stats enable
capture cookie ASP.NET_SessionId len 32
maxconn 10000

前端Front_https

mode http
default_backend backend_https
bind *:443 ssl crt /etc/haproxy/cert.pem 
capture cookie ASP.NET_SessionId len 32
maxconn 10000

后端backend_http

 balance roundrobin
 option forwardfor
 stick-table type ip size 20k expire 5m
 appsession ASP.NET_SessionId len 64 timeout 5m request-learn prefix
 server Server_1 192.168.10.81:80 cookie Server_1
 server Server_2 192.168.10.81:80 cookie Server_2
 server Server_3 192.168.10.81:80 cookie Server_3

后端backend_https

 balance roundrobin
 option forwardfor
 stick-table type ip size 20k …

我觉得这里有一个明显的答案，但我无法弄清楚为什么下面的模型示例中的 \xe2\x80\x93#one不被“推” #three？

看看MDN 给出的最后一个例子，粘性元素似乎将另一个推出窗口，而这里#one&#three似乎只是相互滑动。我觉得这与高度有关（？），但任何解释这一点的帮助将不胜感激！

* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1 {\r\n  text-align: center;\r\n  color: #000;\r\n  font: bold 20vw Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.sticky {\r\n  position: sticky;\r\n  top: 0px;\r\n}\r\n\r\n#start {\r\n  width: 100%;\r\n  height: 50vh;\r\n  background: #fff;\r\n}\r\n\r\n#one {\r\n  height: 100vh;\r\n  width: 100%;\r\n  background: url(\'https://picsum.photos/900/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}\r\n\r\n#two {\r\n  width: 50%;\r\n  position: relative;\r\n  height: 100vh;\r\n  background: url(\'https://picsum.photos/800/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}\r\n\r\n#three {\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: url(\'https://picsum.photos/700/1200/?random\');\r\n …

我有一个非常简单的需求：使和元素粘在屏幕的右侧。

在 Firefox 中一切正常，但在 Chrome 中该right: 0属性被忽略。我说没关系，我可以通过使用来实现我的目标left: calc(100% - 80px);，但这是一个幸运的情况，当我知道粘性元素的宽度时。

然而，后来我感到困惑：虽然上述解决方法按预期工作（elemtn 粘在右侧），但也如此left: 100%;，就此而言，也如此left: 2000%，而没有触发溢出（在 Chrome 和 Firefox 中测试）。我显然错过了一些东西。也许我不明白粘性元素的左右定位，尽管 Firefox 和 Chrome 之间存在明显差异。

left: calc(100% - var(--element-width))完全有道理，但任何人都可以解释一下：为什么被right忽略以及为什么left: 100%并且left: 2000%就此而言也起作用（即，它将元素定位在我期望right: 0放置它的位置，当它应该明显溢出时。）

.wrapper{
  width:100%;
  position:relative;
}
.container{
  height: 2000px;  
}
.floater{
  position:sticky;
  height:200px;
  width:80px;
  background:red;
  top:200px;
  right:0;  
}

<div class="wrapper">
    <div class="container">
      <div class="floater">
        hei!
      </div>
    </div>
</div>