我想将 div 粘贴到其父元素的顶部。
它通常有效，除了这个例子:http://jsfiddle.net/HV9HM/2859/
function sticky_relocate() {
var window_top = $('#container').scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('.stick').css('width', $('#sticky').next().css('width'));
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$('#container').scroll(sticky_relocate);
sticky_relocate();
});.child {
height: 200px;
background: gray;
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<div id="container" style="overflow-y: auto; height: 800px;">
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
问题是，如果将名为 container 的 div 滚动到底部，div 将滚动到顶部(这是一个错误)。
如果你向 div 添加另一个 child :
<div class="child"></div>
它有效..
你可以在这里看到工作 fiddle :http://jsfiddle.net/HV9HM/2860/
function sticky_relocate() {
var window_top = $('#container').scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('.stick').css('width', $('#sticky').next().css('width'));
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$('#container').scroll(sticky_relocate);
sticky_relocate();
});.child {
height: 200px;
background: gray;
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
<div id="container" style="overflow-y: auto; height: 800px;">
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
(不同之处在于第一个 fiddle 的 child 少了一个 child 类)。
感谢任何帮助!
最佳答案
发生这种情况的原因是，一旦您将 position: fixed 赋予您的 #sticky 元素，它就会将其从文档流中移除。这意味着您的所有 div.child 元素都向上移动，这使得容器元素的高度变小。因为容器元素高度变小，容器元素不再需要滚动，也就是它的滚动条消失，它的滚动位置重置为0。当它的滚动位置重置为0时，脚本再次移除stick class 从你的 #sticky 元素，我们回到了我们开始的地方，但是容器元素一直滚动到顶部。
总结:
#sticky 元素获取 .stick 类。
#sticky 元素从文档流中移除，子元素向上移动，容器元素高度降低，滚动条消失。容器的 scrollTop 重置为 0。
脚本再次触发，从 #sticky 中移除 .stick 类，并且容器的 scrollTop 保持为 0(因此容器 div 向上滚动到顶部)。
下面是对#sticky元素使用position: absolute的解决方案，当#sticky元素获取到 stick 类，它为 #sticky-anchor 元素赋予与 #sticky 元素相同的高度，以防止子 div 向上移动。
工作现场演示:
function sticky_relocate() {
var window_top = $('#container').scrollTop();
var div_top = $('#sticky-anchor').offset().top;
$('.stick').css('width', $('#sticky').next().css('width'));
if (window_top > div_top) {
$('#sticky-anchor').height($("#sticky").outerHeight());
$('#sticky').addClass('stick');
$("#sticky").css("top", (window_top) + "px");
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function () {
$('#container').scroll(sticky_relocate);
sticky_relocate();
});.child {
height: 200px;
background: gray;
}
#sticky {
padding: 0.5ex;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: absolute;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<div id="container" style="overflow-y: auto; height: 800px; position: relative;">
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
JSFiddle 版本:http://jsfiddle.net/HV9HM/2883/
作为旁注，它在您的第二个示例中运行良好的原因是额外的子元素使它成为这样，即使您的 #sticky 元素已从文档流中删除并且容器元素的高度降低了，容器元素的高度仍然足够大以防止滚动条跳跃/消失和更改/重置您的 scrollTop。
关于javascript - 将 div 粘贴到父元素的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32024209/
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm
在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at
我在尝试使用Nokogiri构建XML文档时遇到了一个小问题。我想将我的元素之一称为“文本”(请参阅下面粘贴代码的最底部)。通常，要创建一个新元素，我会执行类似以下的操作xml.text--但它似乎是.text是Nokogiri已经用来做其他事情的方法。因此，当我写这行时xml.textNokogiri没有创建名为的新元素但只是写了意味着成为元素内容的文本。我怎样才能让Nokogiri实际制作一个名为的元素？？builder=Nokogiri::XML::Builder.newdo|xml|xml.TEI("xmlns"=>"http://www.tei-c.org/ns/1.0"
如果我想使用“create”构建策略创建和实例，然后想使用“attributes_for”构建策略进行验证，是否可以这样做？如果我在工厂中使用序列？在Machinistgem中有可能吗？ 最佳答案 不太确定我是否完全理解。而且我不是机械师的用户。但听起来您只是想做这样的事情。@attributes=FactoryGirl.attributes_for(:my_object)my_object=MyObject.create(@attributes)my_object.some_property.should==@attributes