Tag: css position

jQuery Mobile固定页脚滚动文本一次然后在iOS应用程序中停止: 我使用jquery-mobile（1.1.1）和Adobe PhoneGap Build创建了一个iOS应用程序。该应用程序具有固定的页眉和页脚，并且过渡设置为“无”。页脚包含4个导航按钮，通过javascript导航到应用程序中的四个页面。我使用了多页模板，因此只有一个HMTL文件。最初，我使用“data-position：fixed”在页面上定位页眉和页脚，但在页面之间切换时遇到了一些不需要的闪烁和页面跳转。所以，我转而使用CSS来修改页眉和页脚到屏幕上（如本文所述： https ： //github.com/jquery/jquery-mobile/issues/4024 ）。这解决了闪烁的问题，但引入了不同的问题。问题是：第一次滚动文本，在任何页面上，页脚随文本一起移动（即它不会保持固定）。但只是第一次 – 从那时起，每当我滚动文本时，页脚就会保持固定。为了澄清，这里有几个例子：例1 打开应用程序，在第一页滚动文本 – 页脚移动。切换到第二页，滚动文本 – 页脚保持固定。例2 打开应用程序，切换到第二页而不在第一页上滚动 – 页脚在第二页上移动。切换回第一页，页脚保持固定。另外一件事我应该提一下 – 如果我启用了页面转换，那么问题只发生在第一页上。例如。如果应用程序加载并且我切换到另一个页面而没有先滚动第一页上的文本，页脚将保持原样应该固定。任何有关修复此问题的方法的建议都将不胜感激。谢谢。

Sticky Headers with -webkit-overflow-scrolling CSS: 使用修改过的jQuery插件，我们开发了一个粘性标题滚动框，用于在本机应用程序中模仿iOS上的本机function，并使用可在所有计算机上运行的跨浏览器解决方案。这是FIDDLE： http ： //jsfiddle.net/f3y9s/1/ 一切正常，包括在iOS上。更进一步，我想使用-webkit-overflow-scrolling：touch来实现iOS的原生平滑。问题是，这会导致标题在滚动完成后重新定位，而不是在滚动发生时重新定位。有没有什么办法解决这一问题。这是FIDDLE： http ： //jsfiddle.net/f3y9s/ jQuery的 $(document).ready(function($){ $.fn.stickySectionHeaders = function(options) { var settings = $.extend({ stickyClass : ‘sticky’, headlineSelector: ‘strong’}, options); return $(this).each(function() { var $this = $(this); $(this).find(‘ul:first’).bind(‘scroll.sticky’, function(e) { $(this).find(‘> li’).each(function() { var $this = $(this), top = $this.position().top, height = $this.outerHeight(), $head = $this.find(settings.headlineSelector), […]

jQuery偏移量返回或内联的无效值: 我已经创建了一个测试用例，请查看它，因为它说明了我的问题： http ： //jsfiddle.net/jAD2W/6/ （感谢@patrick dw减少示例）为了完整起见，此代码也已添加到本文的底部。基本上，每当我得到span元素或inline div元素的偏移量时， top值都应该大于它应该的值。当您将鼠标hover在示例中的图像上时，它应该保持在该绝对位置。不幸的是，它似乎被降低了。是什么导致它向下移动？删除span元素可以解决问题，这表明它是由span元素的内联属性引起的。不幸的是，我确实需要整个内容包含span或内联div元素。来自jsFiddle（html，javascript，css）的代码： $(‘#containerElement1’).mouseenter(function(e) { var offset = $(this).offset(); $(this).css({ ‘position’: ‘absolute’, ‘top’: offset.top, ‘left’: offset.left }); }); img { width:250px; height:150px; } span { width:250px; height:150px; }

DIV绝对定位 – 在浏览器窗口resize后保持位置: 我正在显示位置绝对的div。 .my_label{ list-style:none; list-style-type:none; position:absolute; top:2px; left:10px; width:20px; height:20px; background-color:#FF1021; } 一旦我重新调整浏览器窗口的大小，所有这些div都保持在同一位置。而且他们不再是父母元素的绝对。我希望他们与周围的物体保持联系。我应该使用“相对”的位置还是有另一种方式？（也欢迎jQuery）非常感谢

如何将Fixed元素hover到某个点: 我有一个div需要固定在屏幕的底部，直到滚动后到达某个点并停在那里并留下。如果用户开始向上滚动 – 在传递相同的点后再次修复它。关于如何实现这一点的任何想法？编辑:(这是我目前的代码不起作用） $(window).scroll(function () { if ($(this).scrollTop() < $(document).height() – 81) { $('#bottom_pic').css('bottom', "0px"); } else { $('#bottom_pic').css('bottom', "81px"); } }); CSS: #bottom_pic { position: fixed; bottom: 0px; } $(window).scroll(function () { if ($(this).scrollTop() < $(document).height() – 81) { $('#bottom_pic').css('bottom', "0px"); } else { $('#bottom_pic').css('bottom', "81px"); } }); CSS: #bottom_pic { […]

固定位置div仅垂直: 我有一个当前的网页构建，右侧边栏是固定位置。我试图从右边定位，但不希望它与其他div内容重叠。我正在寻找的是当内容超出视口窗口时，将内容水平向右滚动。任何帮助将不胜感激。与此类似： http ： //demo.rickyh.co.uk/css-position-x-and-position-y/但是我不能让这个工作。这已通过替代方法解决。感谢那些真正考虑过帮助的人。

一旦到达其父容器的底部，我怎么能在“#sidebar”中添加一类“底部”？: 我正在使用下面的代码，一旦它从站点的顶部到达某个高度，它会添加一个fixed到#sidebar的类，具体取决于它所在的页面（即主页，单页，页面）。以类似的方式，一旦#sidebar到达其容器的底部（ #content ），我想在#sidebar添加一类bottom 。如果用户向上滚动，则应删除bottom类，并应添加fixed类。目标是尝试使固定侧边栏一旦到达其底部就与其容器中的其余内容一起向上移动。 JavaScript的 var threshold = 236; if (jQuery(document.body).hasClass(“home”)) { threshold = 654; } else if (jQuery(document.body).hasClass(“single”) || jQuery(document.body).hasClass(“page”)) { threshold = 20; } var scrolled = false; jQuery(window).scroll(function () { if (jQuery(window).scrollTop() >= threshold && !scrolled){ jQuery(‘#sidebar’).addClass(‘fixed’); scrolled = true; } else if (jQuery(window).scrollTop() < threshold && scrolled) { […]

hover菜单在固定div的右侧: 我有一个固定位置的div（顶部面板），它还包含最右边的设置菜单（目前通过浮动）。将鼠标hover在设置图像上时，我想在图像下方显示一个菜单。我希望菜单与图像一样对齐到右侧。 setting 1 setting 2 setting n 任何使用jQuery的想法非常赞赏，随意重新排列任何HTML。

根据滚动位置固定切换位置: 我有以下代码修复菜单的位置，它将滚动到页面顶部。 $(function () { var msie6 = $.browser == ‘msie’ && $.browser.version = top) { $(‘.menu’).addClass(‘fixed’); } else { $(‘.menu’).removeClass(‘fixed’); } }); } }); CSS .container { width:400px; margin:auto; } .header { background-color:#096; height:150px; } .fixed { position:fixed; top:0px; left:50%; margin-left:50px; } .bodyContainer { overflow:hidden; } .menu { float:right; width:150px; height:250px; background-color:#F00; } .bodyCopy { […]

Javascript / jQuery粘性而不使用css位置：已修复: 我正在寻找一个粘性标题的Javascript / jQuery插件，它不会将元素的样式切换到固定的位置。通常，我正在使用这个http://stickyjs.com/ ，它工作正常。我正在使用jQuery动画的网站上工作，我的一个div有一个宽度为100％的粘性标题。但是当我向左移动时（例如），宽度：100％现在基于窗口的宽度而不是他的容器。那么，是否有一个现有的插件与其他插件做同样的事情，但保持位置：相对并计算scrollTop以应用为我的粘贴标题的margin-top？