Bring the item at the top of the page, even if the page does not scroll.

Question

Background:

Say you have a simple page with a logo and only a headline and one paragraph

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

Here is what it looks like

This page would obviously not have a vertical overflow / scrollbar for almost even small mobile devices, not to mention computers.

Question

How can you move this title to the upper left of the screen and bring the logo out of focus if someone doesn't scroll? Open any JavaScript library and any CSS framework to use.

Attempts:

• I tried using bindings, but they only work if the page already had a scroll bar and an anchor out of focus.
• Tried window.scrollTo but also requires the page to have scrolling already
• Tried $("html, body").animate({ scrollTop: 90}, 100); but this also does not work when the page has no overflow

Notes:

Note that adding some extra <br/> to cause an overflow is not the way to go, but it can be done like that, but it is a very common workaround

Why is this necessary?

For a form for mobile devices, a simple requirement is to move the first field of the form to the top of the page and hide the logo (you can scroll up if they want to see it), so it does not take far attention. Do not use jQueryMobile for this specific task.

Answer 1

If you want the user to scroll up and see the logo, the logo should be at the top of the body tag, because nothing outside of this tag will be displayed. This means that you cannot use negative fields or compensate for this. The only way to achieve this is to scroll to the right place at the top of the body tag. You can set the time for this event to one millisecond, but when loading it will still "jump" on the page. So, the logic: first make sure the page is long enough to scroll to the right place, then scroll through it.

 //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); 

Look at here.

Alternatively, you can load a page without an image in the first place. Then your form field will be flush with the top of the document . You can then create the item at the top and scroll the page again in the same way. However, this is one way to do the same. And the page will still "jump", there is no way.

Answer 2

CSS only and link binding solution

With pseudo-element :

--- DEMO ---

First:

set: html,body{height:100%;}

The second:

Select one of the existing tags. This tag should not have a relatively positioned parent (except for the body tag). Preferably, the first markup element is displayed after the logo. For your example, this will be the h1 tag. And give it this CSS:

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

This creates the element as height, as the area of ​​the viewport. Since it is displayed below the logo, the vertical scroll length matches the height of the logo.

Thirdly:

Give the first element after the id logo (for this example, I gave id="anchor" ).

Then you can use a link like this your_page_link#anchor and automatically go to the anchor (logo outside / above the viewport).

This works regardless of the height of the logo.

link to editable script

Full code:

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

You may need to add js functions to hide the logo if the user scrolls down, but I assume the following code will fill in the first requirement.
Cm.

  <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> 

I found this question to find a solution.

Answer 4

You can use the touchmove event to detect scrolling up or down. This is my example. You can try it on your mobile device.

  <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

This is the same problem that I encountered while hiding the address bar without overflowing the page. The only solution that fit my needs was the following:

Set the minimum body height to the upper viewing angle + your logo.

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

Answer 6

This is a simple solution to get the height of the content, to see if we can scroll to the part of the title, if not, we add the height to the paragraph.

 <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> 

script:

 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); } } 

Here is a working example: http://jsfiddle.net/Uup62/1/

Answer 7

You may like this solution: 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> <img src = "https://drupal.org/files/images/OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT.png" height = "  <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> >  <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; }