Tag: 视口

滚动页面时粘滞的div留在页面底部: 当有人向下滚动页面时，某个时刻会出现一个div（带有cta按钮）。我想要实现的是，从那个时刻开始，这个div变得“粘滞”并在视口的底部向下滚动，如果网站向下滚动的话。这个div基本上是，但不是真的，有点粘性页脚，因为网站的其余部分继续在它后面滚动。现在，我在页面顶部获得div粘性没有问题，但那不是我所追求的。它需要坚持在底部。我使用带有词缀的bootstrap 3。我快到了，但还没到。以下带有css的javascript几乎完成了这项工作，但是只要div在视口内可见，带有id cta的div就会跳过视口。从那一刻开始，它会在底部的视口中向下滚动，但从上到下的跳跃需要消失:) //stuff thats being wrapped above the div with id cta. Button text $(‘#cta’).affix({ offset: { top: function() { return $(‘#affixwrapper’).height(); } } }); .affix { bottom: 0px; position: fixed; width: 100%; background-color: white; z-index: 777; }

如何获取视口中可见的第一个DOM元素？: 如何获取视口中可见的第一个DOM元素？ PS：当我滚动到页面的中间或底部时，页面中的第一个DOM元素将不是第一个“可见”元素

如果文档高于视口，则执行函数: 这是我经历的一些非常奇怪的行为。我想只在文档比视口高时执行一个函数（即它溢出它并出现一个滚动条）。我用这个代码： var docH = $(“document”).height(), viewPortH = $(“window”).height(); if (docH > viewPortH) { // execute functions } 但没有任何反应，控制台返回：未捕获的TypeError：无法读取null的属性“parent” 有谁知道问题是什么/我应该使用什么代码来查看文档是否比视口高？

测量窗口偏移量: 有没有办法在jQuery中测量窗口的偏移量，而不是比较“固定”元素和相对定位元素的位置？我需要能够告诉窗口滚动多远，以便我可以使用该图来计算固定元素（相对于视口顶部）的高度与相对对象（相对于顶部）之间的差异该文件）

适合移动设备的网页设计：如何在文本输入后以编程方式缩小？: 我在桌面和移动浏览器IMO中都有一个看起来和function正常的网页，但我一直无法解决特定的UXfunction。当用户点击/点击文本字段进行搜索时，移动浏览器会缩放到文本框以进行数据输入。这很好，我想保留它！ ..但是如何重置页面比例/缩放/变换？我希望在用户停止输入后以编程方式缩小..但我没有用谷歌搜索和/或尝试过任何工作。值得注意的是：如果你双击大多数元素，浏览器将重置缩放/缩放，但我显然使用了错误的关键字或者提出错误的问题来识别这种行为。我似乎找到的解决方案是通过视口元标记禁用用户缩放，这不是我想要的，或类似于这个仍然没有答案的问题。这是我尝试过的一些东西： 1）通过YUI模拟双击，我对此寄予厚望。 // Then elsewhere in script, simulate a double-tap on the DIV containing the input. YUI().use(‘node-event-simulate’, function(Y) { var node = Y.one(“#left”); node.simulateGesture(“doubletap”, {point: [4, 4]}); }); 2）这不起作用.. window.parent.document.body.style.zoom = 1.0; 3）使用JQuery以1的比例缩放到“窗口”或“正文”也失败了.. $(“window”).animate({ ‘zoom’: 1}, 400); 4）当我考虑使用CSS在我最外面的DIV上做一个transform2d时，我很兴奋，但令我懊恼的是，它不起作用.. $(‘#outer-div’).css(“transform”, “scale(1,1)”); $(‘#outer-div’).css(“-ms-transform”, “scale(1,1)”); $(‘#outer-div’).css(“-webkit-transform”, “scale(1,1)”); 5）最后，我尝试声明一个视口元标记并在运行时对其进行操作，但这并不适用于多个级别; 或者我没有明显的状态变化，或者如果我确实得到了改变，缩放在几个方面“只是错误”（一些文本将丢失，div的大小错误，谷歌地图canvas变得邪恶）。 // Replace..reset […]

jQuery（window）.height（）不适用于移动浏览器: 我有一个完整的页面幻灯片使用jQuery（窗口）.height（），它在大多数浏览器上工作正常，但我在我的手机（Android浏览器和海豚）上检查了它，幻灯片显示不断增长，远远超出了视口。这是我的代码： var height = jQuery(window).height(); jQuery(‘.slide’).each(function(index, element) { if(height > 600) jQuery(this).height(height); else jQuery(this).height(600); }); jQuery(window).on(‘resize orientationChanged’, function() { jQuery(‘.slide’).each(function(index, element) { if(height > 600) jQuery(this).height(height); else jQuery(this).height(600); }); }); 什么可能导致它的想法？谢谢。

javascript的“媒体查询” – 不同视口高度/宽度的不同代码: 问题我正在使用javascript来计算元素的宽度，以实现我之后的布局。问题是，我不想在较小的屏幕尺寸上加载代码（例如，当屏幕宽度小于480px时）。我希望这可以在加载和浏览器/视口resize时工作。我认为小屏幕设备是默认设备，并从那里开始工作。因此，默认情况下不会调用以下脚本，如果浏览器宽度大于480px（例如），则会调用以下脚本：代码 $(document).ready(function() { //Get the figures width var figure_width = $(“.project-index figure”).css(“width”).replace(“px”, “”); //Get num figures var num_figures = $(“.project-index figure”).length; //Work out how manay figures per row var num_row_figures = Math.ceil(num_figures / 2); //Get the total width var row_width = figure_width * num_row_figures; //Set container width to […]

部分在视口中时，jQuery显示/隐藏Div: 我的代码目前在这里： http ： //www.jaygeorge.co.uk/gwennan-sage 您将看到两个绿色箭头位于页面底部的固定位置。当时间轴部分不在视图中时，我很难让jQuery隐藏这些div（#timeline-buttons），最好使用fade（）技术。我已经尝试了一个Viewport插件但是无法使它与if语句一起正常工作，我确信它可以通过以某种方式测量div高度来使用普通的jQuery来完成。任何建议表示赞赏，提前谢谢。

更改元视口标记: 我需要根据视觉视口的宽度更改元视口标记。我知道如何做到这一点，但它不起作用，我认为这是因为该网站运行这一点JS为时已晚，无法生效。这可能不是这个，但这是我的第一个想法。在我的application.js文件中： $(document).ready(function() { // If screen width is 480 or less then add meta viewport tag // (so default mobile display is used on iPads until that optimised view is added) if (window.innerWidth <= 480) { // This looks at the size of the visual viewport $('#viewport').attr('content', 'width=device-width'); } } 在我的index.html中：任何想法如何让我的块尽快运行，所以它实际上生效了？ […]