Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2017
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Getting my header to minimize when scrolling down

    Hi all, my HTML and CSS coding skills are a bit lacking to be honest, and I'm using a template I've customized. But I'm trying to find a way to get my header to "minimize" or "shrink" when scrolling down. I found this simple tutorial: https://www.w3schools.com/howto/howt...der_scroll.asp but after fiddling with different parts of wordpress pages, I couldn't get it to work.

    If anyone can take a quick look, here's a link to the website I'm working on: website

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,083
    Thanks
    37
    Thanked 1,081 Times in 1,077 Posts
    We can not help th out YOUR code. You might have missed a comma or misspelled a word. Post your code here or link to your website that has the code.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,427
    Thanks
    4
    Thanked 488 Times in 476 Posts
    Being the trash that is W3Fools, there's a number of issues there -- like blindly assigning window.onscroll when other scripts could interfere with that hook, pissing on accessibility using pixel measurements on everything, directly manipulating style from the scripting when you have no idea of the screen media CSS is even active, and the outdated / incomplete method of getting the scroll position.

    Here, try mine which works via a class swap.

    Code:
    (function(d, w) {
    	var header = d.getElementById('header');
    	w.addEventListener('scroll', function(e) {
    		d.body.classList[
    			w.pageYOffset > header.offsetHeight / 2 ? 'add' : 'remove'
    		]('scrolled');
    	});
    })(document, window);
    ... and the screen media CSS would be something like this:

    Code:
    #header {
    	position:sticky;
    	padding:3.125em 0.625em;
    	text-align: center;
    	font:bold 5.625em/6em arial,helvetica,sans-serif;
    	transition:0.2s;
    	background:#F1F1F1;
    	color:#000;
    }
    
    .scrolled #header {
    	font-size:1.875em;
    }
    Runs faster since it doesn't have to dick with getElementById "inside the loop", being inside a SIF (self instancing function, also known as a IIFE, instantly invoked functional expression) isolates the script from interference and makes us not have to endlessly say "document", uses window.addEventListener so that if anything else is hooking scroll it's not screwed over by that -- or worse screws that over. (unless it too does window.onscroll instead of addEventListener), actually detects the height of the header element so it doesn't shrink until it's been scrolled half its height, and does a class swap on BODY so that you can use the same script to trigger multiple layout issues

    Also a great example of why SIF/IIFE make 'newer' concepts like "let" and "const" utterly pointless additions to the language. Joe forbid we just exploit scope normally.

    Just place this script (or load it externally) right before </body> and you're good to go.

    The drawbacks? I didn't code in support for IE9 and earlier. Honestly with a little silly graphical effect like this? OH FREAKING WELL. Don't waste time or code bending over backwards for something that does not impact actual usefulness or accessibility.

    Particularly if you're going to piss on usability and accessibility by making it position:fixed and/or position:sticky in the first place. I would suggest the latter if you're going to do this wasting screen space that could better be used to show ACTUAL CONTENT just because it means you don't have to screw around changing a top-margin on the content or having unwanted gaps. "sticky" isn't available at ALL in IE (any version) though it works in edge, so that's a possible drawback -- but in that case I'd again just not do it in IE.

    NOT that I would do any of this in the first place since again it's trash accessibility that can piss off end users for wasting screen space. Space they might want to show content instead of. WHEN I have a client that insists on it I toggle the sticky behavior with a checkbox and label like I would a mobile menu so users have the option.

    Bloody W3fools, why do people keep singing their praises when they're top to bottom outdated, outmoded, half-assed incomplete trash that do NOTHING but teach you how not to build a website? Much less how much of a dirtbag bunch of scam artists they've repeatedly shown themselves to be.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •