Canvas Support

changing transparency of sticky header various times

7 replies·opened Aug 6, 2021
C
ChrisMabAug 6, 2021

(using a one page template)

I wanted to know how you can change the tranparency of the sticky header back and forth scrolling down the page.

At the moment I have this functionality set:

<header id="header" class="full-header transparent-header border-full-header dark header-size-custom" data-sticky-shrink="false" data-sticky-class="not-dark" data-sticky-offset="full" data-sticky-offset-negative="100">

The problem is that I'm struggeling to get it back to transparent after the first change and it will just stay semi transparent over the whole page.

Thanks in advance.

S
SemiColonWebSTAFFAug 6, 2021

Hello,

Apologies for the Inconveniences caused!

There appears to be some JS Issue on the Page that might be causing this. The Default Files appear to be working fine for us: http://themes.semicolonweb.com/html/canvas/op-index.html . Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

C
ChrisMabAug 6, 2021

Hi,

That is the behaviour I have at the moment (as from your link). The only difference is that I made the header semi transparent. What I want is that the header changes back to transparent like it is over the hero.

Like: Hero (transparent), About (semi transparent), Team (transparent), and so on. My goal is to control the headers transparency depending on tha location of the page. Thanks in advance.

S
SemiColonWebSTAFFAug 6, 2021

Hello,

You can consider using something like this:

<script>
	var elHeader = $('#header'),
		elHeaderWrap = $('#header-wrap');

	window.addEventListener( 'scroll', function() {
		var scrolledSection = SEMICOLON_onePageCurrentSection();

		if( 'wrapper' === scrolledSection ) {
			return;
		}

		if( 'section-services' === scrolledSection ) {
			elHeader.addClass( 'dark' );
			elHeaderWrap.addClass( 'bg-transparent' );
		} else {
			elHeader.removeClass( 'dark' );
			elHeaderWrap.removeClass( 'bg-transparent' );
		}
	}, { passive: true });
</script>

Add the above code at the bottom of the Page after the js/functions.js JS File Linking.

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

C
ChrisMabAug 7, 2021

Thanks! It kind of works but it doesn't accept my custom header settings afterwards. I guess because it changes header to sticky-header after some point after scrolling (without your script). Can you tell me what is changing it from "header" to "sticky-header"?

I had to adjust the script:

    <script>
        var elHeader = $('#header'),
            elHeaderWrap = $('#header-wrap');

        window.addEventListener('scroll', function () {
            var scrolledSection = SEMICOLON_onePageCurrentSection();

            if ('wrapper' === scrolledSection) {
                return;
            }

            if ('section-services' === scrolledSection) {
                elHeader.addClass('');
                elHeaderWrap.addClass('dark bg-transparent');
            } //else {
            //    elHeader.removeClass('dark');
            //    elHeaderWrap.removeClass('bg-transparent');
            //}
        }, { passive: true });
    </script>

Thanks in advance.

S
SemiColonWebSTAFFAug 7, 2021

Hello,

The Sticky Header functionality is handled by the stickyMenu: function( headerOffset ) Function in the js/functions.js File.

Since this is Custom Functionality, support will be limited to the included features, as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

C
ChrisMabAug 8, 2021

Thanks. I managed to do it with your posted script. Just had to adjust the sticky-header class instead of trying to use the regular header class.

S
SemiColonWebSTAFFAug 9, 2021

Hello,

Glad your issues were resolved.

Please do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard