markgoodyear / headhesive.js Goto Github PK

Hi Mark,

Thanks for the plugin. it's awesome but I've a problem. I've used with bootstrap and collapse menu not working at top. When I scroll down, collapse menu works.
Check it out http://demo.themecube.net/zakat/

Thanks in advance

Uncaught ReferenceError: _mergeObj is not defined

Trying to compare your demo file to mine and I can't seem to figure what else I need.

Hello,

I've tried instantiating headhesive twice to create two "sticky-header-like" objects but it fails (throws weird errors in my console about being unable to clone stuff), though strangely enough only on some specific page of my site only, not all of them ^^.

To be precise, I wanted to use headhesive's logic for a "back to top" button and it worked quite fine except for that page where it doesn't... and after spending quite a few hours on it I still can't find out why (I've retro-engineered the whole thing by removing everything until the page worked and then re-adding scripts one by one until it failed again... and it fails with headhesive IF I instantiate it twice).

Basically, I have this in my $(document).ready(function(){}) call :

// instantiate headhesive
header = new Headhesive('#header',headhesiveOptions);

// instantiate back-to-top footer button
footer = new Headhesive('#back-to-top',headhesiveFooterOptions);

If I comment the footer = ... line, my page works, otherwise I get a [Error] TypeError: null is not an object (evaluating 'this.elem.cloneNode') error that doesn't even trace back to the headhesive file (it's minified in a big app.js file that includes quite a few other jquery scripts), but that doesn't happen with any other plugin (see the whole "remove/reintroduce" tests I mentioned earlier) or if I don't call headhesive twice...

Is it something (instantiating twice) that hasn't been accounted for and thus is prone to fail, but could be adapted for and become permissible, or is it just me that isn't doing stuff properly?

As is often the case, I'm working on a big site where the client is a bit sensitive about showing stuff until the site is officially online (especially if it means admitting something is wrong), but I do understand that it might be easier to help me with access to "real in-context" code so I'm trying to work out something on that topic.

For now, I'd really like to at least know if it's something that's just not possible with the current version or if there isn't any reason it shouldn't work and I need to keep looking in my own codebase for potential pitfalls...

Any help will be absolutely, definitely appreciated.

Noticed an issue on Firefox. It doesn't happen all the time, but mostly. Also it happens on the script demo too. When I refresh on mid-page, sticky header doesn't show. I have to scroll a little bit to make it show. Could there be something preventing the sticky state from working properly? Hope you can help me.

First of all thanks a lot for the plugin !

When I call the destroy() method in a jQuery "click" event, I get the following error : "TypeError: 'undefined' is not an object (evaluating 'header.destroy')"

Any idea ?
I don't know javascript really well :)

If I use the default CSS I can't use the collapsed navigation as when I click on the button (not cloned) it triggers the cloned (hidden) collapsed-nav.

element is cloned with same id, i suggest remove id of cloned element

Hello, is there any avalible option to change clonned elemeте parnet. In my project the parrent must be not body, it must be body>div#my-page>headhesiveClonedElement???
otherwise it crashes another plugin called MMenu.js

Hi, please, can somebody help me with mobile menu on clone not working.

const menu = document.querySelector('.mmenu');

menu.addEventListener('click', () => {
      menu.classList.toggle('change');
});

Thanks

I am not sure whether to post this as an issue or if I'm supposed to post this somewhere else, but this just took a couple of hours of my time and I hope this might help some people.

If you set overflow to be hidden in the CSS of your body/html, the only event that will actually trigger is the init() event on page load, but not any of the other ones. This probably has something to do with the fact that the jQuery window.onScroll() event does not fire when overflow is hidden, which this library probably relies on.

Hope this helps someone.

Cheers

I don't know what's wrong, I have picked up the code from demo but I'm getting this error.

ReferenceError: _mergeObj is not defined
file:///E:/copy/uxkraft/website/js/vendor/headhesive.js
Line 39

And one more thing, I would like to suggest if we use .header instead of .banner would be great because we are making header as sticky and not the banner.

Hi @markgoodyear , love this plugin!

I'm using $('.menu-toggle').on('click' .....) to handle the opening of a navigation once a button is clicked. Once the header element containing the button has been cloned, however, the cloned button won't fire at all: even if I use a more specific selector containing .headhesive.

I've done a bit of reading and debugging but I keep coming back to the (perhaps incorrect) conclusion that the .on() method should be enough for this?

Do I need to register another event handler specifically for the cloned version of this button?

Any help greatly appreciated.

Cheers,
Dave

When I resize the Browser, I get this error. But only when I use a number as offset.

My fix (line 114) :

_setScrollOffset: function() {
      if (typeof this.options.offset === "string") {
        this.scrollOffset = _getElemY(document.querySelector(this.options.offset), this.options.offsetSide);
      }
    },
}

I just love this plugin, awesome work!! I've had a few comments from people that the animation and offset might be best disabled on my site. Is that possible? I set offest: 0 but there is still a flicker, when the clone kicks in.

Thank you so much.

I don't see it used in the demo?

Hi Mark,

Thanks for this super simple plugin.
I have problem with the offset - it can't 'see' the trigger and I can't figure out what I have missed. There's no error on console, and the header is perfectly cloned. The 'banner--clone' class is there but the trigger is not detected.

I've tried with class, offset value and also put an anchor like on the demo but nothing. So weird. The thing is, the clone is there so it works & i totally lost why it won't see the trigger.

Would you know what I might do wrong or what I have missed?

Thanks again

I mean it works :) , but it doesn't show the background color correctly. I even tried changing the demo to make sure, but there is no transparency.

Is this a known thing, or I am missing something very obvious here ?

Hi,

I love this plugin, but i have a problem though. When is activated, my responsive menu it doesn't opening. I don't know where to look, since i'm not too good in javascript. Have you tried to use your plugin with Bootstrap so far?

Thank you,
Daniel

Feature idea from this issue: #8

Rather than when the scroll position hits the top of the trigger element, allow to target the bottom.

Hi there,

I have a website which uses Headhesive, superfish and i18next.
I have a header which has navigation bar. On this navigation bar, the 2nd navItem has a dropdown menu.

The Headhensive clones the whole header but missing the dropdown menu.
This is the main menu

<nav id="main-menu" data-easing="easeInOutExpo" data-speed="1250">
                            <ul>
                                <li>
                                    <a href="#home">
                                        <div data-i18n="nav.home">Home</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#service">
                                        <div data-i18n="nav.services.title">Title</div>
                             
                                        <ul>
                                            <li>
                                                <a href="#service">
                                                    <div data-i18n="nav.services.ourservices">Our Services</div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#how">
                                                    <div data-i18n="nav.services.howwework">How We Work</div>
                                                </a>
                                            </li>
                                        </ul>
                                    </a>
                                </li>

As you can see that the ul is the dropdown menu.

When the window height is changed, some elements may change height or elements may change height as a result of another action, the trigger height isn't updated when an element is selected for the trigger point.

Maybe add in a method to rescan for the trigger point or an option to update the trigger point on the window resize?

Thanks,
Sam

Would be nice if the developers with node installed (who doesn't) could just type "bower install headhesive" Like a magic step.

Hello! Thank you for this plugin is awesome, but I have a problem in chrome. My sticky menu is stuck at the page´s banner. check it out by your self: https://hamacasramirosuazoehijo.online.com.ni/Pages/default.aspx

Thank you!

Hello,

i am suing some class based dark mode convertor so it not working due class cloning so please help me on it.

Thanks

Cloning elements can cause duplicate id's and that happens when using asp.net. It would be great to have the option not to clone, but move instead allowing the plugin to work in every scenario.

From what I can tell the trigger fires when the trigger element enters the browser window, however I wish to fire they trigger when the trigger element leaves the window (when scrolling down). Is this possible?

I cannot set an numerical offset as the site is responsive so this changes.

I essentially am duplicating what Mashable do with their share buttons, ..the share buttons on are on the page below an article title, but when leave leave the page I want them to trigger headhesive. I have placed a #share-trigger below the share buttons,..although in retrospect just using the share buttons div would work if I could set it to trigger when it leaves the page.

Is this possible? ..thanks in advance.

I feel bad writing feature requests, but say you get to a certain point in the page and you need the unstuck element to stay there - like the top of a contact form so it doesn't get in the way.