[英]How to make div stick near parent DIV
我在本地新闻网站上看到了这样的功能:
左div固定在主div的位置,并且在滚动和窗口大小调整时,它保持固定在该位置,在滚动时它向上/向下移动,也固定在主div
对不起,英语/解释不好(但我想你明白)。
您可以在此链接中看到我想要得到的:
如果您不使用任何Adblock,则http://rus.delfi.lv/news/daily/abroad/papa-rimskij-obratilsya-s-tradicionnym-rozhdestvenskim-poslaniem-k-pastve.d?id=43988560
是否有任何特殊的jquery插件或使用简单的CSS实现?
在我的网站上,左边是Facebook图片,该图片随页面滚动,在鼠标悬停(jquery)时,它会扩展并显示插件框:
HTML
<div id="fbwindow">
<a href="http://www.facebook.com/.../" id="fbwindow_a"></a>
<div class="fb-like-box" data-href="http://www.facebook.com/.../" data-width="292" data-show-faces="false" data-stream="true" data-show-border="true" data-header="true"></div>
</div>
CSS
#fbwindow { position: fixed;top:50%;margin-top:-200px;left:-292px;width:323px;height: 265px;z-index: 1000;text-align: left; }
#fbwindow div.fb-like-box { background: #FFF; }
#fbwindow > a { display: block;float: right;width: 31px;height: 187px;background: url('/layout/fb-window.png') no-repeat; }
(可选/不需要翻转效果)jQuery
$('#fbwindow_a').mouseenter(function() {
$("#fbwindow").stop().animate({
left: '0'
}, 100, function() {
//$(this).removeClass("left").addClass("right");
});
});
$('#fbwindow').mouseleave(function() {
$("#fbwindow").stop().animate({
left: '-292px'
}, 50, function() {
//$(this).removeClass("right").addClass("left");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.