Sticky Header issue in Salesforce Lightening

aceace
edited February 4 in Questions
I have a skuid page for salesforce lightening. I have custom JavaScript for sticky header. It works on skuid-preview page, but doesn't work on salesforce lightning. Has any one encounter this problem ?
Below is my sample code:
(function(skuid){
var $ = skuid.$;
var j$ = jQuery.noConflict();
$(document.body).one('pageload',function(){
    var j$ = jQuery.noConflict();
    j$(document).ready(function(){
         var navOffset= j$(".scrolling").offset().top;
         console.log(navOffset);
         
         j$(window).scroll(function()
         {
            
             var scrollPos= j$(window).scrollTop();
             
             console.log(scrollPos);
             if (scrollPos>=navOffset)
             {
                 j$(".scrolling").addClass("fixed");
             }
             else
             {
                 j$(".scrolling").removeClass("fixed");
             }
         });
         
    });
   });
})(skuid);

Comments

  • Amy DewaalAmy Dewaal ✭✭
    edited February 4
    Do you get any errors in your browser console? Have you generated a page support file for this page by going to More Page Actions -> Generate Support File? Does your javascript follow Salesforce’s Developing Secure Code guidelines?

  • aceace
    edited July 2017
    No I didn't get any error in console. It is actually working on preview page from edit mode but not working on lightening mode.  When i Go to "more page action", there is no option to generate a page support file. 
  • aceace
    edited July 2017
    Here, nothing is passing inside   -----    j$(window).scroll(function() {   }  


         
  • Amy DewaalAmy Dewaal ✭✭
    edited July 2017
    What version of Skuid are you on? If you're on a version before Brooklyn Q2 you'll want to go ahead and update to it or later. It contains some important improvements with how we interact with Lightning and may fix your problem
  • aceace
    edited July 2017
    Hello Amy,    
                       We are on Current brooklyn version.
    Let me show the flow, how we are displaying a  record detail.
    'OpportunityDetail' page has a pageInclude --"OpportunityDetailModel". The script exist in 'OpportunityDetailModel'. When I  preview directly from "OpportunityDetailModel' page, script works, but when I try to go through "OpportunityDetail " page, the script doesn't work. Since we are displaying "OpportunityDetail", but we are calling the Script on pageInclude---"OpportunityDetailModel", window.scroll () function is not executing.
    Am I missing something to include on the code ?
  • Mark DeSimoneMark DeSimone 🛠️ 
    edited July 2017
    Hi Ace, you'll want to make sure that if you're triggering the script on page load, you actually set it up to watch for (".nx-page").one("pageload", ...) etc instead. This works for page includes and child pages, when the whole document isn't reloaded.

    To quote one of our developers:
    Anywhere that the following code is used:
    $(document).ready(function() {
    Replace it with:
    $(".nx-page").one("pageload", function() {
    You can read more here:https://community.skuid.com/skuid/topics/pages-no-longer-loading-upgrade-to-9-3-3
  • nsns
    edited November 2017
    Ace, you ever get this to work correctly? 
Sign In or Register to comment.