busraozata/headroom-js-example.markdown

## headroom-js-example.markdown

      
    Raw
  

              headroom-js-example.markdown
            
          
    headroom.js example

A Pen by Peaks on CodePen.
License.

  
## index.html
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>headroom.js</title>
</head>

<body class="example-1">
    <header class="headroom">
        <h1>Tech news</h1>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
                <li id="buy-link"><a href="#">Buy now</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>The HP Pavilion</h1>
            <p>The HP Pavilion g6-1d46dx was a decent mainstream laptop in its day, and you could replace it with something very similar. There have been lots of changes at the low end of the windows market, with touch-screen tablets and 2-in-1s, and at the high-end, with super-thin laptops with high-resolution screens, like the latest Dell XPS 13 and Microsoft’s new Surface laptop. But 15.6in laptops have not changed much, and they still sell by the truckload. Today’s mainstream laptops are thinner than they used to be – your HP g6 is 1.4in thick – and cheaper. However, the standard specification remains much the same. Your current laptop, for example, has 4GB of memory, a 500GB hard drive, a 1366 x 768-pixel screen and Microsoft Windows. That’s still the most common specification. Some 15.6in laptops now have touch screens, but those are optional. You’re probably not going to use a 15.6in laptop as a tablet, so you’d be better off spending the extra cash on an external Bluetooth or USB mouse. One thing that has changed is that three brands now dominate Windows PC sales in the USA, where you live. In the fourth quarter of last year, according to Gartner’s market research, HP had 30% of the whole PC market (including Apple), with Dell on 25% and Lenovo on 14%. Acer and Asus had about 4% each. There’s been a lot of consolidation in a declining market, which means non-specialist (and non-Apple) buyers rarely look beyond the top five suppliers. Both HP and Dell sell PCs from their online stores, so you can look at those for special offers. If you buy online, both companies offer reasonably-priced support contracts that you won’t get from a retailer. I am based in the UK, so I’m not very familiar with the American retail market, and I don’t know if you live within range of any particular stores. I’m therefore going to restrict my links to Amazon.com. However, you can search for alternative sources. The processor is usually the most expensive part of a mainstream 15.6in laptop and has the greatest impact on both price and performance. Your HP g6 has a 1.6GHz AMD A6-3420M quad-core processor, which is slow by today’s standards. But while your g6 is old and slow, some of today’s 15.6in laptops are new and slow. For example, based on benchmark results, the HP 15-F222WM’s Intel Pentium N3540 quad-core processor probably runs even slower than your g6, and I’d expect the version with an AMD A6-7310 to run at about the same speed. These machines sell because they are cheap: they cost only $266.98 (£207) and $258.95 respectively. For a little extra money – from $30 or $40 more – you can get dramatically better performance from a 15.6in laptop with an Intel Core i3-6100U or i3-7100U. These chips are much faster, and will provide a much more satisfying experience. The 6” in the i3-6100U indicates that this is a sixth-generation chip and a year older than the seventh-gen i3-7100U. The newer chip has slightly more powerful graphics, but in practice, you wouldn’t be able to tell them apart. Other things being equal, it’s better to have an i3-7100U, but it’s not worth paying much extra to get one. The i3-6100U is fine. Some laptops have 8GB instead of 4GB of memory, and 1TB instead of 500GB hard drives. Both are improvements, and very nice to have, but not essential for your purposes. Some laptops now have 1920 x 1080-pixel screens, which means you can see more data at once than on your 1366 x 768-pixel screen. It also means that everything looks smaller, which may not suit you. However, Windows has a built in scaling system to make text, apps and other elements bigger on your screen. To find it, type scaling” into the Windows search/run box in the bottom left. You can try 125%, 150% or 175% and pick whichever you like. (You can actually try up to 500%; not recommended.) Higher-resolution screens are better for viewing photos and watching movies, but you didn’t mention either in your emails.</p>
        </article>

        <article>
            <h1>Google Docs</h1>
            <p>A Google Docs scam that appears to be widespread began landing in users’ inboxes on Wednesday in what seemed to be a sophisticated phishing or malware attack. The deceptive invitation to edit a Google Doc – the popular app used for writing and sharing files – appeared to be spreading rapidly, with a subject line stating a contact has shared a document on Google Docs with you”. If users click the Open in Docs” button in the email, it takes them to a legitimate Google sign-in screen that asks to continue in Google Docs”. Clicking on that link grants permission to a bogus third-party app to possibly access contacts and email, which could allow the spam to spread to additional contacts. Google has said it is aware of the issue and investigating it. The company encouraged users to report the email as phishing within Gmail. We have taken action to protect users against an email impersonating Google Docs, and have disabled offending accounts,” a spokesperson said in a statement. We’ve removed the fake pages, pushed updates through Safe Browsing, and our abuse team is working to prevent this kind of spoofing from happening again.” The company did not immediately respond to requests for comment on how many people had been affected by the attack and where it may have originated. Numerous journalists have reported receiving the phishing email, including multiple Guardian reporters. One message to the Guardian came from a maryland.gov account associated with law enforcement and was addressed to hhhhhhhhhhhhhhhh@mailinator.com”, and blind-copied the reporter. Reporters at BuzzFeed, Hearst, New York Magazine, Vice and Gizmodo Media have also reported receiving the scam. Phishing scams typically involve emails, ads or websites that appear to be real and ask for personal information, such as usernames, passwords, social security numbers, bank account data or birthdays. Google says it does not send out emails asking for this type of data and encourages users not to click on any links and to report suspicious messages. As the Verge noted, Wednesday’s attack seemed to be more advanced than standard email phishing scams, because it doesn’t simply take users to a bogus Google page to collect a password, but instead is working within Google’s system with a third-party web app that has a deceptive name. If users have already granted permission through the phishing email, they can go to their settings and revoke the app. More people are reading the Guardian than ever, but far fewer are paying for it. Advertising revenues across the media are falling fast. And unlike many news organisations, we haven’t put up a paywall – we want to keep our journalism as open as we can. So you can see why we need to ask for your help. The Guardian’s independent, investigative journalism takes a lot of time, money and hard work to produce. But we do it because we believe our perspective matters – because it might well be your perspective, too.</p>
        </article>

        <article>
            <h1>Microsoft</h1>
            <p>Microsoft has spent a lot of time (and money) trying to make Windows self-repairing, partly because it generally gets the blame when other programs – or users – try to improve” it. Given that tens of thousands of expert programmers have worked on the code over the past 30 years, the number of safe, simple, significant and forwards-/backwards-compatible improvements may be quite small. If Windows 10 knew you had a blank or even a black screen of death, it would try to fix it. If it can’t fix it, it should switch to the Windows Recovery Environment, otherwise known as Windows RE or WinRE, which boils down to two options: 1) Start Windows in safe mode using the code on the internal hard drive, then use the troubleshooting routines to fix it. 2) Use code on an external device such as a recovery DVD or USB thumbdrive to start Windows, and then repair or replace the code on the internal hard drive. So, your first aim should be to get to WinRE. From there you can get to safe mode and use the troubleshooting and repair options. If you can’t do that, you will have to – as WinRE puts it – use a device”. Safe mode was designed to solve the chicken-and-egg problem that you need to access your PC to fix it, but you can’t access your PC if it won’t start. In theory, WinRE makes it simple to get into safe mode. That’s not working on your laptop, but you can try to force it. Windows RE is supposed to appear after your PC has failed to boot two or three times. That depends on Windows 10 counting boots correctly, as distinct from restarting from sleep or recovering from some other failure. However, you are definitely booting your PC if you start with it turned off. To make sure it is off, hold the power button down for at least five seconds. (Touching the power button usually invokes a sleep or hibernation mode where the PC can be woken up by a network connection.) In extremis, you can ensure it’s off by unplugging it from the mains and removing the laptop’s battery, if possible. If not, you can leave it until the battery runs flat then try again. Before WinRE arrived, you could get into safe mode by pressing a key such as F2 or F8. (You may need to look up which key to press.) That worked when Windows generally took from 40 to 90 seconds to start. It’s impractical with today’s Windows 10 computers, which can start in eight to 10 seconds, but you can still try it. It may bring up WinRE or the UEFI/Trusted Platform Module (TPM) screen – see below. Once you get into Safe Mode, you can use the troubleshooting and reset or recovery options to repair your PC. Since you have a blank screen problem, it may be worth updating the video graphics driver. Other troubleshooting options include System Restore, System Image Recovery, Startup Repair, Command Prompt, Startup Settings, UEFI Firmware, and Go back to previous build”, if there is one. System Restore would take you back to a setup saved before you ran your tune-up utility. System Image Recovery would depend on you having made a system image backup beforehand. (This is always a good idea.) Otherwise, Windows 10’s troubleshooters cover a wide range of topics, including the old BSoD or Blue Screen of Death. There isn’t one for the Black version, but Microsoft has some online help at Troubleshoot black screen problems.</p>
        </article>
    </main>


    <script src="https://unpkg.com/headroom.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var headerElement = document.querySelector('.headroom'),
            headroom = new Headroom(headerElement, {
                offset: 250
            });
            headroom.init();
		});
    </script>
</body>
</html>

## style.css
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.85);
}

img {
  max-width: 100%;
  display: block;
  margin-top: 2rem;
}

.example-1 .headroom {
  background-color: #252526;
  padding: 0 2rem;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  transition: transform .3s linear;
}

.example-1 .headroom h1 {
  color: #fff;
  float: left;
  line-height: 4rem;
}

.example-1 nav {
  float: right;
}

.example-1 nav ul li {
  float: left;
  list-style: none;
  margin-left: 2rem;
}

.example-1 nav ul li a {
  display: inline-block;
  line-height: 4rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.example-1 nav ul li a:hover {
  color: white;
}

.example-1 main {
  width: 75%;
  margin: 3rem auto 0;
  padding-top: 4rem;
}

.example-1 article {
  margin-bottom: 3rem;
}

.example-1 article h1 {
  margin: 1.5rem 0;
}

.headroom--pinned {
  transform: translateY(0%);
}

.headroom--unpinned {
  transform: translateY(-100%);
}

#buy-link {
  display: none;
}

.headroom--pinned.headroom--not-top #buy-link {
  display: inline-block;
}
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>headroom.js</title>
	</head>

	<body class="example-1">
	<header class="headroom">
	<h1>Tech news</h1>

	<nav>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact</a></li>
	<li id="buy-link"><a href="#">Buy now</a></li>
	</ul>
	</nav>
	</header>

	<main>
	<article>
	<h1>The HP Pavilion</h1>
	<p>The HP Pavilion g6-1d46dx was a decent mainstream laptop in its day, and you could replace it with something very similar. There have been lots of changes at the low end of the windows market, with touch-screen tablets and 2-in-1s, and at the high-end, with super-thin laptops with high-resolution screens, like the latest Dell XPS 13 and Microsoft’s new Surface laptop. But 15.6in laptops have not changed much, and they still sell by the truckload. Today’s mainstream laptops are thinner than they used to be – your HP g6 is 1.4in thick – and cheaper. However, the standard specification remains much the same. Your current laptop, for example, has 4GB of memory, a 500GB hard drive, a 1366 x 768-pixel screen and Microsoft Windows. That’s still the most common specification. Some 15.6in laptops now have touch screens, but those are optional. You’re probably not going to use a 15.6in laptop as a tablet, so you’d be better off spending the extra cash on an external Bluetooth or USB mouse. One thing that has changed is that three brands now dominate Windows PC sales in the USA, where you live. In the fourth quarter of last year, according to Gartner’s market research, HP had 30% of the whole PC market (including Apple), with Dell on 25% and Lenovo on 14%. Acer and Asus had about 4% each. There’s been a lot of consolidation in a declining market, which means non-specialist (and non-Apple) buyers rarely look beyond the top five suppliers. Both HP and Dell sell PCs from their online stores, so you can look at those for special offers. If you buy online, both companies offer reasonably-priced support contracts that you won’t get from a retailer. I am based in the UK, so I’m not very familiar with the American retail market, and I don’t know if you live within range of any particular stores. I’m therefore going to restrict my links to Amazon.com. However, you can search for alternative sources. The processor is usually the most expensive part of a mainstream 15.6in laptop and has the greatest impact on both price and performance. Your HP g6 has a 1.6GHz AMD A6-3420M quad-core processor, which is slow by today’s standards. But while your g6 is old and slow, some of today’s 15.6in laptops are new and slow. For example, based on benchmark results, the HP 15-F222WM’s Intel Pentium N3540 quad-core processor probably runs even slower than your g6, and I’d expect the version with an AMD A6-7310 to run at about the same speed. These machines sell because they are cheap: they cost only $266.98 (£207) and $258.95 respectively. For a little extra money – from $30 or $40 more – you can get dramatically better performance from a 15.6in laptop with an Intel Core i3-6100U or i3-7100U. These chips are much faster, and will provide a much more satisfying experience. The 6” in the i3-6100U indicates that this is a sixth-generation chip and a year older than the seventh-gen i3-7100U. The newer chip has slightly more powerful graphics, but in practice, you wouldn’t be able to tell them apart. Other things being equal, it’s better to have an i3-7100U, but it’s not worth paying much extra to get one. The i3-6100U is fine. Some laptops have 8GB instead of 4GB of memory, and 1TB instead of 500GB hard drives. Both are improvements, and very nice to have, but not essential for your purposes. Some laptops now have 1920 x 1080-pixel screens, which means you can see more data at once than on your 1366 x 768-pixel screen. It also means that everything looks smaller, which may not suit you. However, Windows has a built in scaling system to make text, apps and other elements bigger on your screen. To find it, type scaling” into the Windows search/run box in the bottom left. You can try 125%, 150% or 175% and pick whichever you like. (You can actually try up to 500%; not recommended.) Higher-resolution screens are better for viewing photos and watching movies, but you didn’t mention either in your emails.</p>
	</article>

	<article>
	<h1>Google Docs</h1>
	<p>A Google Docs scam that appears to be widespread began landing in users’ inboxes on Wednesday in what seemed to be a sophisticated phishing or malware attack. The deceptive invitation to edit a Google Doc – the popular app used for writing and sharing files – appeared to be spreading rapidly, with a subject line stating a contact has shared a document on Google Docs with you”. If users click the Open in Docs” button in the email, it takes them to a legitimate Google sign-in screen that asks to continue in Google Docs”. Clicking on that link grants permission to a bogus third-party app to possibly access contacts and email, which could allow the spam to spread to additional contacts. Google has said it is aware of the issue and investigating it. The company encouraged users to report the email as phishing within Gmail. We have taken action to protect users against an email impersonating Google Docs, and have disabled offending accounts,” a spokesperson said in a statement. We’ve removed the fake pages, pushed updates through Safe Browsing, and our abuse team is working to prevent this kind of spoofing from happening again.” The company did not immediately respond to requests for comment on how many people had been affected by the attack and where it may have originated. Numerous journalists have reported receiving the phishing email, including multiple Guardian reporters. One message to the Guardian came from a maryland.gov account associated with law enforcement and was addressed to hhhhhhhhhhhhhhhh@mailinator.com”, and blind-copied the reporter. Reporters at BuzzFeed, Hearst, New York Magazine, Vice and Gizmodo Media have also reported receiving the scam. Phishing scams typically involve emails, ads or websites that appear to be real and ask for personal information, such as usernames, passwords, social security numbers, bank account data or birthdays. Google says it does not send out emails asking for this type of data and encourages users not to click on any links and to report suspicious messages. As the Verge noted, Wednesday’s attack seemed to be more advanced than standard email phishing scams, because it doesn’t simply take users to a bogus Google page to collect a password, but instead is working within Google’s system with a third-party web app that has a deceptive name. If users have already granted permission through the phishing email, they can go to their settings and revoke the app. More people are reading the Guardian than ever, but far fewer are paying for it. Advertising revenues across the media are falling fast. And unlike many news organisations, we haven’t put up a paywall – we want to keep our journalism as open as we can. So you can see why we need to ask for your help. The Guardian’s independent, investigative journalism takes a lot of time, money and hard work to produce. But we do it because we believe our perspective matters – because it might well be your perspective, too.</p>
	</article>

	<article>
	<h1>Microsoft</h1>
	<p>Microsoft has spent a lot of time (and money) trying to make Windows self-repairing, partly because it generally gets the blame when other programs – or users – try to improve” it. Given that tens of thousands of expert programmers have worked on the code over the past 30 years, the number of safe, simple, significant and forwards-/backwards-compatible improvements may be quite small. If Windows 10 knew you had a blank or even a black screen of death, it would try to fix it. If it can’t fix it, it should switch to the Windows Recovery Environment, otherwise known as Windows RE or WinRE, which boils down to two options: 1) Start Windows in safe mode using the code on the internal hard drive, then use the troubleshooting routines to fix it. 2) Use code on an external device such as a recovery DVD or USB thumbdrive to start Windows, and then repair or replace the code on the internal hard drive. So, your first aim should be to get to WinRE. From there you can get to safe mode and use the troubleshooting and repair options. If you can’t do that, you will have to – as WinRE puts it – use a device”. Safe mode was designed to solve the chicken-and-egg problem that you need to access your PC to fix it, but you can’t access your PC if it won’t start. In theory, WinRE makes it simple to get into safe mode. That’s not working on your laptop, but you can try to force it. Windows RE is supposed to appear after your PC has failed to boot two or three times. That depends on Windows 10 counting boots correctly, as distinct from restarting from sleep or recovering from some other failure. However, you are definitely booting your PC if you start with it turned off. To make sure it is off, hold the power button down for at least five seconds. (Touching the power button usually invokes a sleep or hibernation mode where the PC can be woken up by a network connection.) In extremis, you can ensure it’s off by unplugging it from the mains and removing the laptop’s battery, if possible. If not, you can leave it until the battery runs flat then try again. Before WinRE arrived, you could get into safe mode by pressing a key such as F2 or F8. (You may need to look up which key to press.) That worked when Windows generally took from 40 to 90 seconds to start. It’s impractical with today’s Windows 10 computers, which can start in eight to 10 seconds, but you can still try it. It may bring up WinRE or the UEFI/Trusted Platform Module (TPM) screen – see below. Once you get into Safe Mode, you can use the troubleshooting and reset or recovery options to repair your PC. Since you have a blank screen problem, it may be worth updating the video graphics driver. Other troubleshooting options include System Restore, System Image Recovery, Startup Repair, Command Prompt, Startup Settings, UEFI Firmware, and Go back to previous build”, if there is one. System Restore would take you back to a setup saved before you ran your tune-up utility. System Image Recovery would depend on you having made a system image backup beforehand. (This is always a good idea.) Otherwise, Windows 10’s troubleshooters cover a wide range of topics, including the old BSoD or Blue Screen of Death. There isn’t one for the Black version, but Microsoft has some online help at Troubleshoot black screen problems.</p>
	</article>
	</main>


	<script src="https://unpkg.com/headroom.js"></script>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	var headerElement = document.querySelector('.headroom'),
	headroom = new Headroom(headerElement, {
	offset: 250
	});
	headroom.init();
	});
	</script>
	</body>
	</html>
	* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}

	body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.85);
	}

	img {
	max-width: 100%;
	display: block;
	margin-top: 2rem;
	}

	.example-1 .headroom {
	background-color: #252526;
	padding: 0 2rem;
	overflow: hidden;
	position: fixed;
	width: 100%;
	top: 0;
	transition: transform .3s linear;
	}

	.example-1 .headroom h1 {
	color: #fff;
	float: left;
	line-height: 4rem;
	}

	.example-1 nav {
	float: right;
	}

	.example-1 nav ul li {
	float: left;
	list-style: none;
	margin-left: 2rem;
	}

	.example-1 nav ul li a {
	display: inline-block;
	line-height: 4rem;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	}

	.example-1 nav ul li a:hover {
	color: white;
	}

	.example-1 main {
	width: 75%;
	margin: 3rem auto 0;
	padding-top: 4rem;
	}

	.example-1 article {
	margin-bottom: 3rem;
	}

	.example-1 article h1 {
	margin: 1.5rem 0;
	}

	.headroom--pinned {
	transform: translateY(0%);
	}

	.headroom--unpinned {
	transform: translateY(-100%);
	}

	#buy-link {
	display: none;
	}

	.headroom--pinned.headroom--not-top #buy-link {
	display: inline-block;
	}