sarahdayan / feedify

Feedify is a JQuery plugin inspired by Instagram's "stick to top then drop" effect
https://sarahdayan.github.io/feedify/
40 stars 7 forks source link

Cannot make it work in Inoreader, need a little help. #5

Open luboq opened 7 years ago

luboq commented 7 years ago

I'm not a front-end programmer, so this may be a dumb question.

I tried this plugin successfully in some simple pages. However, I cannot make it work in Inoreader, where I want to make the title of feed fixed when scrolling.

Maybe I miss something, any suggestion?


Here is a test account of Inoreader, if someone willing to test: account: n927053@mvrht.com password: n927053@mvrht.com

and the script I wrote using feedify is below, which can be used in Greasemonkey of Firefox, or Tampermonkey of Chrome/Safari.

// ==UserScript==
// @name        My - Inoreader Sticker Head
// @namespace   waldens
// @description Makes head of feed stick when scroll
// @include     http*://www.inoreader.com*
// @require     https://rawgit.com/sarahdayan/feedify/master/js/jquery-1.11.3.min.js
// @require     https://rawgit.com/sarahdayan/feedify/master/js/feedify.min.js
// @version     1
// @grant       none
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true);

fix();

var mo = new MutationObserver(function(allmutations) {
    fix();
});
mo.observe(document.querySelector('#reader_pane'), {'childList': false,'characterData':false,'subtree': true});

function fix() {
    $("head").append (
        '<link href="https://rawgit.com/sarahdayan/feedify/master/css/feedify.min.css" rel="stylesheet" type="text/css">'
    );

    $('#reader_pane').addClass("feedify");
    $('#reader_pane > .article_no_thumbnail').addClass("feedify-item");
    $('#reader_pane .article_header').addClass("feedify-item-header");
    $('#reader_pane .article_full_contents').addClass("feedify-item-body");

    $(function() {
      $('.feedify').feedify();
    });
}

salc commented 6 years ago

the correct way should be:

$(function() {
      $('.feedify').feedify({
           container: $('#my_right_panel_container')   /* the div that scrolls content in the image */
      });
});

but its useless because the code only works with a window container. Inside the code, positioning is calculated using offsets that are related to the document.