0

trying to use together Angular-Snap with ngSticky but it doesn't work, panel which should stay sticky is being scrolled.

I've prepared two examples:

You can expand in both examples accordion panel and try to scroll to see the difference. Actually I've tried multiple solutions to make the element be sticky but no one have worked with Angular-Snap

If I remove in 1st, non-working example angular-snap.css file it begins to work, but obviously I need it. I couldn't debug this issue further, so any help would be appreciated.

Anatoly
  • 5,056
  • 9
  • 62
  • 136

2 Answers2

0

Actually I found a workaround :) I'm smiling because it isn't first time when I find a solution by myself shortly after I'm posting a question.

I've created the following directive:

.directive("stickyElement", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            console.log("scrolled");
        });

        $(".snap-content").bind("scroll", function(event){
            var scrolledUp = $(".snap-content").scrollTop();
            console.log("from top: " + scrolledUp);
            var offset = 50 - scrolledUp > 0 ? 50 - scrolledUp : 0; 
            $(element[0]).offset({top: offset});

        })
    };
});

First of all it detects scroll of .snap-content element and not window which remains unscrolled, if I understand correctly this is reason why it didn't work. Angular-Snap cause to window be unscrolled. And then I make a simple calculation to find out which offset from the top this element should receive and then set this value. Of course in a final version all parameters will be passed in an Angular way.

This is working example: https://plnkr.co/edit/HnBM2P5H7D2LPYt7uXve?p=preview

P.S. Despite the fact that it's working I feel that it's a little hackish solution due to reason that my directive bind to non related element, .snap-content. Therefor if somebody will give more beautiful solution I will accept it.

Anatoly
  • 5,056
  • 9
  • 62
  • 136
0

The author of the Angular-Snap provided solution to this issue here: https://github.com/jtrussell/angular-snap.js/issues/113 You should use:

  • angular-snap-only.css - from this repo
  • snap.css - from the Snap.js repo

Again, please see the detailed explanation here: https://github.com/jtrussell/angular-snap.js/issues/113

Anatoly
  • 5,056
  • 9
  • 62
  • 136