jQuery style "scroll/scrollto/position" actions for adding/removing css on current position?


#1

I’m simply looking to add/remove css visibility on an element based on the scroll position from the top of the view being more than 250px.

So once my 250px height box is out of view, i’d like to add an element visibility.


#2

This is the best/closest example I can find to what I’d like to do/manipulate; however the scroll position never changes.

http://jsfiddle.net/BinaryMuse/Z4VqP/


#3

I think you’re going to need to develop a custom directive for this. I’m lousy at CSS, but I think you’ll need to use something like offsetTop. In your directive, you would need to listen to scroll events, detect offsetTop for the desired element, and then apply whatever CSS you want to hide/show as appropriate.

Anyone else have suggestions?


#4

I can’t seem to get the value that’s attributed to the ionic <div class="scroll"> I keep getting errors when trying to grab the element.

I can inspect the default ionic scroll element and watch the webkit-transoform spit out pixel info on the offset, but I’m so far unsuccessful in trying to read that into my directive.

I’ve tried using several angular.element() attempts using .find() and when that wasn’t working tried getelementbyid/class which also wasn’t working.

I’m making the assumption that $window is what the jquery is injected into, and should be using something like angular.element($window).find('scroll')?


#5

Can you post a code sample? It’s going to be difficult to try to help with out seeing what you are trying to accomplish and what you’ve tried already.


#6
app.directive('scrollPosition', function($window) {
  return {
    scope: {
      scroll: '=scrollPosition'
    },
    link: function(scope, element, attrs) {
      var windowEl = angular.element($window);
      var handler = function() {
        scope.scroll = windowEl.offsetTop();
      }
      windowEl.on('scroll', scope.$apply.bind(scope, handler));
      handler();
    }
  };
});

Since the window itself will never scroll, the position will always be zero. But the ionic div scrolls within the window and I cannot seem to grab/find that element properly


#7

Can you put that in a CodePen with some actual content and wrapped in an actual Angular app?


#8

The inner task list is what I’d like to know the offset. But my problem is grabbing that element for offset. Sometimes I can get “true” when using .find() but it then returns error on window.el.offsettop.


#9

I’m not quite getting what you are trying to detect. However, I modified your’s just a bit to have a scroll-detector that detects scrolling.

Perhaps you could play around with it:


#10

Your implementation is presenting the similar problem as what I was trying (although you are detecting the scroll that’s happening which is good).

The problem being a static offset of the scrollable element container rather than the offset within that scrollable element. As current it’s always returning the static number of the list being 43px from the top (which accounts for the header bar being 43px static height); (where as I was returning the scroll position of the window which would always be zero).

However i’m expecting a result of 0px when the list is default (non-scrolled), and if you scroll from task1 to task 10, i’d expect an offset of -500px or so. So basically the scroll position of the inner list.

As mentioned previous there is a webkit transofrm on the default ionic/angular elemnt which has the values I want to detect (the middle being 0 when at the top of the list, and -458.726222 when scrolled down in the list

<div class="scroll" ng-transclude="" style="-webkit-transform: translate3d(0px, -458.7262241530441px, 0px);">

#11

Still unable to get the actual scroll value into my controller :frowning:


#12

I’ve been dabbling with this : http://codepen.io/calendee/pen/cnaEh

Based on Scroll position on back

Perhaps you could dig into it more.