Scroll to close doesn't work like in Medium #194

Activity

1. terrymun commented on Dec 19, 2017

   

   terrymun

   on Dec 19, 2017

   Owner

   More actions

   The comment you have linked is a good place to start: you can always modify it to suit your needs (in this case, an exact Medium replica in terms of UX). Fluidbox is not meant to be a verbatim copy of Medium's lightbox component, but more of a study of it. It is extremely minimal and stripped down, but powerful in the sense that it emits a lot of events that you can use as hooks for calling custom methods.

   So, this is not a bug per se that has to be fixed ;)
2. terrymun

   added

   question

   will not implement

   on Dec 19, 2017
3. elron commented on Dec 19, 2017

   

   elron

   on Dec 19, 2017

   Last edited by elron

   Author

   More actions

   I see :) thanks for your detailed answer!
   Is the plugin extendable? for example, if I want to add another JS with that event feature without breaking or changing your original code - is that possible? (having the fluidbox-main.js file and the fluidbox-extension.js)
4. terrymun commented on Dec 20, 2017

   

   terrymun

   on Dec 20, 2017

   Last edited by terrymun

   Owner

   More actions

   The plugin does not allow you to register custom events, but you can feel free to create a fork and merge in the master branch whenever it is updated.

   Speaking of your original question, a slightly modification to the code snippet you linked should work (I have not tested it tho):

   // Initialise Fluidbox
   $('a').fluidbox();
   
   // Listen to scroll
   // Note: You might want to throttle the callback, e.g.:
   // - Use jQuery throttle/debounce plugin
   // - Use underscore/lodash _.throttle
   var scrollPosition;
   $(window).scroll(function() {
       var currentScrollPosition = $(window).scrollTop();
       
       // If has scrolled beyond plus/minus 60 pixels
       if (Math.abs(currentScrollPosition - scrollPosition) > 60)
       	$('a').fluidbox('close');
   
       // Update global scroll position store
       scrollPosition = currentScrollPosition;
   });
5. elron commented on Dec 20, 2017

   

   elron

   on Dec 20, 2017

   Author

   More actions

   oh thats genius! thanks.
   Haven't tested it yet but it looks neat.