Question

背景

我们假设您有一个简单的页面，其中包含徽标和标题以及一个段落

<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>

这就是它的样子

enter image description here

该页面显然不会有垂直溢出/滚动条，几乎甚至是小型移动设备，更不用说计算机了。

问题

除非有人向上滚动，否则如何将该标题带到屏幕的左上方并将徽标移出焦点？打开使用任何JavaScript库和任何CSS框架

尝试：

尝试使用锚点，但只有在页面已经有滚动条并且锚点失焦时它们才起作用。
尝试window.scrollTo，但这也要求页面已经滚动
尝试$("html, body").animate({ scrollTop: 90}, 100);，但在页面没有溢出时也无效

备注：

请注意，添加一些额外的<br/>来引发溢出不是可行的方法，可以这样做，但这是一个非常普通的解决方法

为什么需要？

它用于移动设备的表单，简单的要求是将表单的第一个字段放到页面顶部并隐藏徽标（如果他们希望看到它，可以向上滚动）所以它不会注意了。不使用jQueryMobile执行此特定任务。

Answer 1

如果您希望用户能够向上滚动并查看徽标，则徽标必须位于body标记的顶部边界内，因为该标记之外的任何内容都无法查看。这意味着您不能使用负边距或偏移。实现此目的的唯一方法是让页面滚动到body标记顶部边界内的所需位置。您可以将此事件的时间设置为1毫秒，但加载时页面中仍会有“跳转”。因此，逻辑是：首先确保页面足够长以滚动到正确的位置，然后滚动到那里。

//Change the jQuery selectors accordingly

//The minimum height of the page must be 100% plus the height of the image
$('body').css('min-height',$(document).height() + $('img').height());

//Then scroll to that location with a one millisecond interval
$('html, body').animate({scrollTop: $('img').height() + 'px'}, 1);

View it here.

或者，您可以首先加载没有图像的页面。然后，您的表单字段将与document的顶部齐平。然后，您可以在顶部创建元素，同样再次滚动页面。尽管如此，这是一种做同样事情的圆润方式。页面仍然会“跳”，没有办法解决这个问题。

Answer 2

仅CSS和锚链接解决方案

使用伪元素：

--- DEMO ---

首先：

设置：html,body{height:100%;}

第二名：

选择一个现有标签。此标记不能具有相对定位的父级（除非它是body标记）。优选地，标记之后显示标记中的第一元素。对于您的示例，它将是h1标记。并给它这个CSS：

h1:before {
    content:"";
    position:absolute;
    height:100%;
    width:1px;
}

这会创建一个与视口区域一样高的元素。由于它显示在徽标下方，因此垂直滚动长度与徽标高度相同。

第三：

将徽标后面的第一个元素设为id（对于此示例，我提供了id="anchor"）。

然后您可以使用此your_page_link#anchor之类的链接，您将自动滚动到锚点（视口外/上方的徽标）。

这适用于徽标的任何高度。

link to editable fiddle

完整代码：

HTML 的

<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
 <h1 id="anchor">Foo Bar</h1>

<p>ABC12345</p> <a href="#anchor">Anchor link</a>

CSS

html, body {
    height:100%;
    margin:0;
    padding:0;
}
h1:before {
    content:"";
    position:absolute;
    width:1px;
    left:0;
    height:100%;
}

Answer 3

如果用户向下滚动，您可能需要添加js功能来隐藏徽标，但我想以下代码将满足第一个要求。
请参阅

 <script src="js/jquery.js"></script>
 <img id='logo' src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" style="display:none">
 <h1>Foo Bar</h1>
 <p>ABC12345</p>
 <script type="text/javascript">
  var p = $( "p:first" ); 
  var isScrolled=false;
   /* For Firfox*/
   $('html').on ('DOMMouseScroll', function (e) {
     isScrolled = true;
     if(p.scrollTop()==0 && isScrolled==true){
        $('#logo').css('display','block');
      }
   });
   /* For Chrome, IE, Opera and Safari: */
   $('html').on ('mousewheel', function (e) {
      isScrolled = true;
      if(p.scrollTop()==0 && isScrolled==true){
         $('#logo').css('display','block');
      }
   });
  </script>

我已经提到这个question来寻找解决方案。

Answer 4

您可以使用touchmove事件来检测向上或向下滑动。这是我的榜样。您可以在移动设备上试用它。

  <style>
  #logo {
    position: absolute;
    top: -100%;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -ms-transition: top 0.5s;
    -o-transition: top 0.5s;
    transition: top 0.5s;
  }
  #logo.show {
      top: 0;
  }
  </style>

  <script>
  var perY;
  var y;
  $(window).on('touchmove', function(e) {
    e.preventDefault();
    y = window.event.touches[0].pageY;
    if(!perY)
      perY = y;
    else
    {
      if(y > perY)
        $('#logo').addClass('show');
      else
        $('#logo').removeClass('show');
      perY = null;
    }
  });

  </script>


  <img id="logo" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
  <h1>Foo Bar</h1>
  <p>ABC12345</p>

Answer 5

这是我在没有页面溢出的情况下隐藏地址栏时遇到的同样问题。满足我需求的唯一解决方案如下：

将身体的最小高度设置为viewportheight +您的徽标。

$('body').css('min-height', $(window).height() + 200);

Answer 6

这是获取内容高度的简单解决方案，看看我们是否可以滚动到标题的一部分，如果没有，我们为段落添加高度。

<img id="img" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" />
 <h1 id="h" >Foo Bar</h1>
<p id="par" style="background:yellow;">
   hello world
</p>

脚本：

function hola(){
   var imgH = $("#img").outerHeight(true);
   var titleH =  $("#h").outerHeight(true);
   var winH = $(window).height();
   var parH = $('#par').outerHeight(true);
   var contH = (imgH + titleH + parH);
   var wishH = (imgH + winH);
   console.log("wished height: " + wishH);
   console.log("window height: " + winH);
   console.log("content height: " + contH);
   if(contH < wishH){
    console.log("window is smaller than desired :(");
    var newH = wishH - contH;
    $("#par").height(parH + newH);
    $(window).scrollTop(imgH);
   }
}

以下是工作示例： http://jsfiddle.net/Uup62/1/

Answer 7

您可能喜欢这个解决方案：http://jsfiddle.net/jy8pT/1/

HTML：

  <div class="addScroll"></div>
  <h1 class="logo"><img src="https://drupal.org/files/images/OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT.png" height="100" alt="company logo"/></h1>

  <h2>This is a sample page heading.</h2>
  <p>This is a sample page text.</p>

JS：

function addScroll()
{
  $(".addScroll").css({
    "height": ($(window).height()+1) + "px",
    "width": "100%"
  });
}

$(document).ready(function(){
addScroll();
  $(window).resize(function(){
    addScroll();
  });
  $(window).scroll(function(){
     if($(window).scrollTop() > 0) 
     {
       $(".logo").animate({
         marginTop: "-110px"
       }, 500);
     }

      if($(window).scrollTop() == 0) 
     {
       $(".logo").animate({
         marginTop: "0"
       }, 500);
     }
  });
});

CSS：

body
{
    padding:0;
    margin:0;
}
h1.logo
{
  display:block;
  margin:0 0 10px 0;
  padding:0;
  outline:0;
}
.addScroll
{
  position:absolute;
  display:block;
  top:0;
  left:0;
  z-index:-1;
}

即使页面不滚动，也会将元素置于页面顶部

7 个答案:

仅CSS和锚链接解决方案

--- DEMO ---

首先：

第二名：

第三：

完整代码：