Sticky Header issue in Salesforce Lightening

  • 1
  • Question
  • Updated 1 year ago
  • In Progress
  • (Edited)
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);
Photo of ace

ace

  • 580 Points 500 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
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?
Photo of ace

ace

  • 580 Points 500 badge 2x thumb
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. 
(Edited)
Photo of ace

ace

  • 580 Points 500 badge 2x thumb
Here, nothing is passing inside   -----    j$(window).scroll(function() {   }  


     
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
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
Photo of ace

ace

  • 580 Points 500 badge 2x thumb
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 ?
(Edited)
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 10,978 Points 10k badge 2x thumb
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
(Edited)
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
Ace, you ever get this to work correctly?