CSS/JS 100% 嵌入高度与 jQuery 滑动标题
我已经搜索了过去两个小时，但无法找到针对这种情况的解决方案。
我有一个网站，允许用户“弹出”来自第三方（例如 justin.tv）的嵌入视频流。当他们这样做时，我在窗口中放置了一个小全宽标题，除了顶部的 10 像素外，该标题大部分都是隐藏的。
当他们将鼠标悬停在 10 像素区域时，标题会扩展到内容中，为他们提供一些菜单选项，例如“弹出回来”。
问题是，无论我做什么（纯 css、css/js 等），我都无法得到它，因此在每种情况下，都是：
- 创建弹出窗口，标题显示为 40px，一段时间后，它会折叠回 10px
- User悬停标题，它会扩展 40px
- 用户鼠标移开标题，它会收缩回 10px
嵌入的视频将占用窗口中的所有剩余空间，并且我们永远不会在窗口中看到滚动条。
我已经“大部分”使用 javascript 来调整 div 的工作，但它与负责更改标题高度的 jquery.animate() 函数结合使用效果不佳。
任何帮助表示赞赏！
编辑：
可以在以下位置找到半个工作示例：
http://wellplayed.org/channel /now_live
根据您阅读本文时正在直播的频道，单击其中一个，然后在“查看流”页面中找到左上角的“弹出流”按钮。
但请注意，我已经纠正了在我的开发环境中完成此操作的一些方法，因此它并不像现在那么糟糕。
I have searched for the past two hours and have been unable to find a solution to this exact situation.
I have a website where I allow the user to "pop out" an embedded video stream from a 3rd party such as justin.tv. When they do that, I put a little full width header in the window which is mostly hidden except for 10px at the top.
When they hover the 10px area, the header expands into the content giving them some menu options such as "pop back in".
The problem is, no matter what I do (pure css, css/js, etc), I cannot get it so that in every case, being:
- Popup created, header displayed at 40px, after some time, it collapses back to 10px
- User hovers header, it expands 40px
- Users mouse moves off header, it contracts back to 10px
The embedded video will take up all remaining space in the window, and we will never see a scrollbar in the window.
I have gotten it to "mostly" work using javascript to resize the div, but it does not work well in conjunction with the jquery.animate() function which is taking care of changing the height of the header.
Any help is appreciated!
EDIT:
A half working example can be found at:
http://wellplayed.org/channel/now_live
Depending on what channels are live when you read this, click on one, and in the "view stream" page, find the "popout stream" button at the top left.
Please note though, I have corrected some of how this was done in my development environment, so its not quite as bad as it is there.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
感谢您发布您想要做的事情的视觉效果，
我认为在这种情况下，如果您使用绝对定位会更容易，这样只有一个变量（顶部坐标）需要操纵，而您不需要必须执行调整大小功能，AP（绝对定位）也会处理这个问题。
本质是你需要 div、bar 和视频容器来同时制作动画，当它们制作动画时，你还需要嵌入的对象以相同的速度调整大小。我发现计算量太多了即便如此，我也无法让对象以任何速度与其父对象一起调整大小。所以我认为让 CSS 做 mych 那样更容易，然后只使用 jQuery 来移动位置
最主要的是确保顶部栏
#stream-bar-hover始终具有相同的高度..所以不要在上面放置填充等..，您已经有#stream-bar> 在里面，所以任何装饰都可以放在那里，我的基础是，根据您的 HTML，左上角的图像是 38x38，但是如果您希望它更小，那么在我添加 1px 边框时，您可以以不同的方式计算下一个图像以及
#stream-bar中的 2px 填充和 2px 边距，这意味着“悬停栏的高度必须为 48px（我确实添加了溢出：隐藏以防万一；））然后绝对位置
# stream-bar-hover和#stream-popup使它们两个填充屏幕的各个部分，因此top: 0;用于栏和 < code>top: 48px; 对于视频容器，这两个 div 的左右坐标和下坐标永远不需要更改，只需更改顶部坐标即可，您的延迟功能和悬停功能应该都可以工作，您只需要使两个 div 顶部同时协调，这种方法的优点是它不需要 window.resize() 函数，我认为你的方法会这样，
这是一个工作示例： jshell.net/clairesuzy/4BUeB/show/" rel="nofollow noreferrer">链接 与小提琴代码： 这里
Thanks for posting the visual of what you were trying to do
I think in this case it would be much easier if you used absolute positioning, that way there is only one variable (top co-ordinate) that needs manipulated, and you don't have to do resize functions, the AP (absolute positioning) will take care of that too.
The essence is that you need both divs, bar and video container, to animate at the same time, and when they're animating you also need your embedded object to resize at the same pace.. I found that there was way too many calculations and even then I couldn't get the object to resize along with it's parent at all at any speed.. so I thought it easier to let CSS do as mych as could then just use the jQuery for moving the position
The main thing is to make sure that top bar
#stream-bar-hoveris always the same height.. so don't put padding etc.. on it, you already have#stream-barinside it so any embellishments can be put thereI went on the basis that that top left image was 38x38 as per your HTML but you can calculate the next bit differently if you want it to be smaller , by the time I added the 1px border and 2px padding and 2px margin in
#stream-barthat meant the height of the "hover bar had to 48px (I did added overflow: hidden just in case ;))Then absolutely position
#stream-bar-hoverand#stream-popupmaking the two of them fill the various parts of the screen sotop: 0;for the bar andtop: 48px;for the video container, the right left and bottom co-ordinates of these two divs need never change by changing only the top one your delayed function and hover functions should both work, you just need to animate the two divs tops co-ordinate at the same timethe advantage to this method is that it needs no window.resize() function which I think your method would
Here's a working example : link with the fiddle for code : here