Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="nav">
	<div class="logo">logo</div>
</nav>
<div class="spanner">Background-image here.</div>
<div class="logo fullscreen">logo</div>
<div class="wrapper">
	<p>Alive! is a free monthly publication in the style of a newspaper which has been produced since its first edition in 1996 by Alive Group, an organisation with an address at the Dominican Order St Mary's Priory, Tallaght in Dublin, Republic of Ireland. The current editor is a Catholic priest, Fr Brian McKevitt, who refers to the publication as a 'newszine'. While it claims a circulation of over 300,000 copies, its actual readership is difficult to establish since a substantial portion of its circulation is delivered door-to-door, with most of the remainder being available through Ireland's network of Catholic churches (who do not provide estimates of take-up).[1] It is printed by Datascope, an independent publishing company in Enniscorthy and contains an appeal in each issue for donations totalling €160,000 annually to remain in circulation.[2]</p>
	<p>Since September 2008, the front page has contained the following disclaimer text: "The content of the newspaper Alive! and the views expressed in it are those of the editor and contributors, and do not necessarily represent the views of the Irish Dominican Province".</p>
	<p>Alive! upholds a conservative Catholic position on a number of issues relevant to Catholic life. These include abortion, euthanasia, marriage, sexuality, feminism, parenting, children's education, "moral decline", the European Union, the veracity of global warming, the perceived anti-Catholicism of the environmental movement in general, and the veracity of Catholicism generally.[3] Each edition of the newspaper will typically contain at least four or five articles on topics drawn from this list. The majority of its articles are written anonymously.</p>
	<p>The publication strongly opposed the Nice Treaty and the Lisbon Treaty on all four occasions on which they were submitted to the Irish people, a position which drew criticism from Irish politicians such as Senator Paschal Donohoe on the grounds that its position could be erroneously interpreted by many Catholics as representing the official views of the Catholic hierarchy. TD Thomas Byrne criticised the publication claiming that he was "bombarded" with its "anti-EU" views while attending mass.[4] Individual politicians and the Oireachtas sub-committee on Europe asked the Catholic Church and Seán Cardinal Brady to ban it from being distributed in churches. Senator Labhrás Ó Murchú stated that it was "completely wrong" to suggest that Cardinal Brady should ban the publication from churches simply because it espoused views opposing the Lisbon treaty.[5] Senator Ivana Bacik defended the criticism of the publication stating that it espoused extreme views that most moderate Catholics oppose and that it was the "equivalent of the paramilitary wing of the Catholic Church".[6]</p>
	<p>A regular article entitled "Dumbag writes...!" features letters, purportedly from a devil named Dumbag, which highlight what the newspaper believes to be the folly of non-Catholic viewpoints. This feature is inspired by The Screwtape Letters by the Anglican writer, C.S. Lewis. The newspaper also features a column by Fr. Owen Gorman, an interview with a public personage about the role of religion in that person's life, a column dealing with perceived media bias against religion and Christianity, and a Window on History article on a historical topic of relevance to the Catholic Church (such as the Penal Laws or the Protestant Reformation).</p>
	<p>The Broadcasting Authority of Ireland upheld two complaints against the RTÉ presenter Joe Duffy that he harassed Fr. McKevitt on air, interrupting him and treating him differently from other contributors to the Liveline show. The BAI decision forced RTÉ to make a statement of apology on 22 June 2013.[7]</p>
	<p>In 2009, Fr. McKevitt attended a meeting in Roscommon of the John Paul II Society along with Declan Ganley (the founder of the now-defunct political organisation Libertas), Senator Ronan Mullen and a number of other conservative Roman Catholics.[8]</p>
	<p>McKevitt was listed at number 67 in the Ireland's Most Influential 100 list published by Village magazine. [9]</p>
	<p>In June 2015 Dina Goldstein threatened to sue the magazine for using images from her "Fallen Princesses" works without her permission.[10] One image appeared on the cover and others throughout the magazine.[10] Ms Goldstein said that the magazine has not contacted her for permission to use the images.[10] She said that she could not disagree more with the sectiments in the article which used the images, that she had left a message with the magazines' office and contacted an attorney to make a formal complaint.[10]</p>
	<p>The Suffolk Journal of Trial & Appellate Advocacy is a scholarly legal journal produced annually by the Suffolk University Law School Moot Court Honor Board. The 2015 edition is volume 20 for the Journal. The Journal is one of several law review publications produced by academic honor boards at Suffolk University Law School in Boston.</p>
	<p>The Journal seeks to publish articles on a wide range of legal topics which are pertinent to judges, practitioners, and academics in Massachusetts and across the United States.[1][2]</p>
	<p>Ibrahima Sylla (2 April 1956 – 30 December 2013) was a Senegalese record producer born in Ivory Coast and founder of the African music label Syllart Records. He was an internationally acclaimed musician whose production and music direction defined popular African music. From West African dance, to Congolese Soukous (also known as Lingala), to melodic griot-led songs, Sylla's signature as a music producer is unmistakable. He has demonstrated his familiarity with many contemporary African musical genres, and he has worked with most of Africa's musical greats.[1]</p>
</div>
              
            
!

CSS

              
                html, body{
	width:100%;
	height:100%;
}
*,*:before,*:after{
	margin:0;
	padding:0;
}
body{
	font-family:'helvetica', 'roboto', 'arial', sans-serif;
background-color:#f4f4f4;
}

.wrapper{
	max-width:600px;
	margin:0 auto;
	background-color:white;
	padding:2em;
	margin-top:5rem;
}

p{
	line-height:1.5em;
	margin-bottom:.6em;
}

nav{
	width:100%;
	height:0;
	background-color:white;
	position:fixed;
	top:0;
	opacity:0;
	overflow:hidden;
	transition: all 100ms ease;
}

.logo{
	width:50px;
	height:50px;
	background-color:purple;
	border-radius:50%;
	margin:.5rem 1rem;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	float:left;
}

.spanner{
	width:100%;
	height:90vh;
	background:url('https://scontent-iad3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/p640x640/14723022_1781904858741555_2183315099861647360_n.jpg?ig_cache_key=MTM3NDk3NjI2ODk2MTIxNDU0Nw%3D%3D.2') purple;
	background-blend-mode:multiply;
	background-size:cover;
}

.logo.fullscreen{
	position:fixed;
	background-color:white;
	width:70vw;
	height:70vw;
	max-width:500px;
	max-height:500px;
	top:50%;
	left:50%;
	color:purple;
	transform: translate(-50%, -60%);
	opacity:1;
	transition:all 350ms ease;
}

.expanded{
	height:4rem;
	box-shadow:0 3px 5px rgba(0,0,0,.1);
	opacity:1;
}

.fullscreen.shrunk{
	top:1.5rem;
	left:1.5rem;
	width:50px;
	height:50px;
	opacity:0;
}
              
            
!

JS

              
                var scrollPos = 0;
var windowHeight = $(window).height();
var triggerHeight = windowHeight/4;
var navEl = $(".nav");
var fullscreen = $(".fullscreen");



$(window).scroll(function(){
	scrollPos = $(window).scrollTop();
	console.log(scrollPos);
	
	if(!fullscreen.hasClass("shrunk")){
		if(scrollPos > triggerHeight){
			fullscreen.addClass("shrunk");
			navEl.addClass("expanded");
		}
	}else{
		if(scrollPos < triggerHeight){
			fullscreen.removeClass("shrunk");
			navEl.removeClass("expanded");
		}
	}
});
              
            
!
999px

Console